String類(lèi)型是字符串的對(duì)象包裝類(lèi)型，包含字符串的所有方法，在js中有著廣泛的使用，本文對(duì)字符串的使用方法做一些總結(jié)。

1、字符方法

用于訪問(wèn)字符串中特定字符的方法。

1、charAt()

• 接收一個(gè)基于索0的參數(shù)，返回給定位置的字符

• "123".charAt(0) // 1 "123".charAt(2) // 3 "123".charAt(4) // ""復(fù)制代碼

2、charCodeAt()

• 接收一個(gè)基于索0的參數(shù)，返回給定位置字符的字符編碼

• "123".charCodeAt(0) // 49 "123".charCodeAt(2) // 51 "123".charCodeAt(4) // NaN "ABC".charCodeAt(2) // 67 "ABC".charCodeAt(3) // NaN 復(fù)制代碼

3、索引值

• 方括號(hào)表示法
• IE7 及更早版本，返回undefined

str = "123" str[0] // 1 str[3] // undefined復(fù)制代碼

2、字符串操作方法

1、concat()

• 用于將一個(gè)或者多個(gè)字符串拼接起來(lái)，返回拼接得到的字符串
• 實(shí)踐中更多的使用加號(hào)操作符“+”，簡(jiǎn)便易行

var str1 = "hello" var str2 = str1.concat(' world') str2 // hello world復(fù)制代碼

2、slice()

• 返回被操作字符串的一個(gè)子字符串，對(duì)原字符串沒(méi)有影響
• 第一個(gè)參數(shù)指定子字符串的開(kāi)始位置，第二個(gè)參數(shù)表示子字符串到哪里結(jié)束。若缺少第二個(gè)參數(shù)，則將字符串的末尾作為結(jié)束位置
• 若參數(shù)是負(fù)值，將參數(shù)與字符串長(zhǎng)度相加
  
  var str = "hello world" str.slice(0,3) // hel str.slice(3) // lo world str.slice(3,-4) // lo w復(fù)制代碼

3、substring()

• 和slice()基本一致
• 若傳入?yún)?shù)為負(fù)數(shù)，則把所有負(fù)值都轉(zhuǎn)換為0
• 會(huì)將較小的數(shù)作為起始位置
  
  var str = "hello world" str.substring(0,3) // hel str.substring(3) // lo world str.substring(3,-4) // hel 復(fù)制代碼

4、substr()

• 第二個(gè)參數(shù)指定返回的字符個(gè)數(shù)
• 若參數(shù)為負(fù)數(shù)，會(huì)把第一個(gè)參數(shù)加上字符串的長(zhǎng)度，第二個(gè)參數(shù)轉(zhuǎn)換為0

var str = "hello world" str.substr(0,3) // hel str.substr(3) // lo world str.substr(3,-4) // "" 復(fù)制代碼

3、字符串位置方法

1、indexOf()

• 從一個(gè)字符串的開(kāi)頭向后搜索給定的子字符串，返回子字符串的位置。若沒(méi)有找到，返回-1
• 接收第二個(gè)參數(shù)，表示從字符串的哪個(gè)位置開(kāi)始搜索
  
  str = "hello world" str.indexOf("o") // 4 str.indexOf("k") // -1 str.indexOf("o",5) // 7 復(fù)制代碼

2、lastIndexOf()

• 從后向前搜索

str = "hello world" str.lastIndexOf("o") // 7 str.lastIndexOf("k") // -1 str.lastIndexOf("o",5) // 4復(fù)制代碼

4、trim()方法

• 創(chuàng)建一個(gè)字符串的副本，刪除前置以及后綴的所有空格，返回結(jié)果

str = " hello world " newStr = str.trim() newStr // "hello world"復(fù)制代碼

5、字符串大小寫(xiě)轉(zhuǎn)換方法

• toLowerCase()，toUpperCase()， 大小寫(xiě)轉(zhuǎn)換的方法
• 針對(duì)部分地區(qū)，toLocaleLowerCase()，toLocaleUpperCase()

str = "hello world" newStr = str.toUpperCase() newStr // "HELLO WORLD" newStr2 = newStr.toUpperCase() newStr2() "hello world"復(fù)制代碼

6、字符串的模式匹配方法

用于在字符串中匹配模式(pattern)的方法

1、match()

• 接收一個(gè)參數(shù)，正則表達(dá)式或者一個(gè)RegExp對(duì)象
• 如果沒(méi)有找到任何匹配的文本， match() 將返回 null
  
• 若找到匹配的文本，返回一個(gè)數(shù)組。該數(shù)組的第 0 個(gè)元素存放的是匹配文本，而其余的元素存放的是與正則表達(dá)式的子表達(dá)式匹配的文本。除了這些常規(guī)的數(shù)組元素之外，返回的數(shù)組還含有兩個(gè)對(duì)象屬性。index 屬性聲明的是匹配文本的起始字符在 stringObject 中的位置，input 屬性聲明的是對(duì) stringObject 的引用
  
• 如果 regexp 具有標(biāo)志 g，則 match() 方法將執(zhí)行全局檢索，找到 stringObject 中的所有匹配子字符串。若沒(méi)有找到任何匹配的子串，則返回 null。如果找到了一個(gè)或多個(gè)匹配子串，則返回一個(gè)數(shù)組。不過(guò)全局匹配返回的數(shù)組的內(nèi)容與前者大不相同，它的數(shù)組元素中存放的是 stringObject 中所有的匹配子串，而且也沒(méi)有 index 屬性或 input 屬性。
  

var text = "cat, bat, sat, fat" var pattern = /.at/ var matches = text.match(pattern) matches // ["cat", index: 0, input: "cat, bat, sat, fat", groups: undefined] var pattern2 = /.at/g var matches2 = text.match(pattern2) matches2 // ["cat", "bat", "sat", "fat"] 復(fù)制代碼

2、search()

• 接收一個(gè)參數(shù)，正則表達(dá)式或者一個(gè)RegExp對(duì)象
• 返回字符串中第一個(gè)匹配項(xiàng)的索引，如果沒(méi)有找到，返回-1
• 始終從開(kāi)頭向后查找
  var text = "cat, bat, sat, fat" var pos = text.search(/sa/) pos // 10復(fù)制代碼

3、replace()

• 接收兩個(gè)參數(shù)。第一個(gè)參數(shù)可以是一個(gè)RegExp對(duì)象或者字符串，第二個(gè)參數(shù)可以是一個(gè)字符串或者一個(gè)函數(shù)
• 返回替換后的結(jié)果
• 第一個(gè)參數(shù)是字符串，只會(huì)替換第一個(gè)子字符串。若要替換所有子字符串，可以提供一個(gè)正則，且要指定全局（g）標(biāo)志
• 第二個(gè)參數(shù)是字符串，還可以使用特殊序列
• 第二個(gè)參數(shù)還可以是函數(shù)

var text = "cat, bat, sat, fat" var result = text.replace(/at/, "ond") result // "cond, bat, sat, fat" var result2 = text.replace(/at/g, "ond") result2 // "cond, bond, sond, fond"復(fù)制代碼

4、split()

• 基于指定的分隔符將一個(gè)字符串分割成多個(gè)字符串，并將結(jié)果放在一個(gè)數(shù)組中
• 接收第二個(gè)參數(shù)，用于指定數(shù)組的大小，以便確保返回的數(shù)組不會(huì)超過(guò)既定大小
• 可以接收一個(gè)正則表達(dá)式，有瀏覽器差異
  var colorText = "red,blue,green,yellow" var colors1 = colorText.split(",") // ["red", "blue", "green", "yellow"] var colors2 = colorText.split(",",2) // ["red", "blue"] 復(fù)制代碼

7、localeCompare()方法

• 比較兩個(gè)字符串
• 如果字符串在字母表中應(yīng)該排在字符串參數(shù)之前，返回一個(gè)負(fù)數(shù)
• 如果字符串等于字符串參數(shù)，返回0
• 如果字符串在字母表中應(yīng)該排在字符串參數(shù)之后，返回一個(gè)正數(shù)

8、fromCharCode()方法

• 接收一或多個(gè)字符編碼，然后將它們轉(zhuǎn)換成一個(gè)字符串

String.fromCharCode(104,101,108,108,111) // "hello"復(fù)制代碼

ES6 新增

1、字符串的遍歷接口

• 字符串可以由for...of循環(huán)遍歷
  for (let codePoint of "foo") { console.log(codePoint)} // f // o // o復(fù)制代碼

2、at()

• ES7新增，返回字符串給定位置的字符，避免之前bug

3.includes()，startsWith()，endsWith()

• includes()，返回布爾值，表示是否找到了字符串
• startsWith()，返回布爾值，表示參數(shù)字符串是否在源字符串頭部
• endsWith()，返回布爾值，表示參數(shù)字符串是否在源字符串尾部
• 都接受第二個(gè)參數(shù)，表示開(kāi)始搜索的位置
• endWith()的第二個(gè)參數(shù)n，針對(duì)前n個(gè)字符

var str = "hello world" str.includes("h") // true str.endsWith("d") // true str.startsWith("h") // true復(fù)制代碼

4、repeat()

• 返回一個(gè)字符串，表示將原字符串重復(fù)n次
• 參數(shù)是小數(shù)，會(huì)被向下取整
• 參數(shù)是負(fù)數(shù)或者infinity，報(bào)錯(cuò)
  str = "hello".repeat(3) str // "hellohellohello"復(fù)制代碼

5、模板字符串

• 模板字符串是增強(qiáng)版的字符串，用反引號(hào)（`）標(biāo)識(shí)。它可以當(dāng)做普通字符串使用，也可以用來(lái)定義多行字符串，或者在字符串中嵌入變量
• 嵌入變量，需要將變量寫(xiě)在$()中
• 大括號(hào)中可以放入任意的js表達(dá)式，可以進(jìn)行運(yùn)算，以及引用對(duì)象屬性，甚至調(diào)用函數(shù)

var x = 1 var y = 2 `${x} + ${y} = ${x + y}` // "1 + 2 = 3"var obj = {a:1, b:2} `${obj.a + obj.b}` // "3"function fn () {return "hello world"} `foo ${fn()} bar` // "foo hello world bar"復(fù)制代碼

6、其它

• codePointAt()? ?正確處理4個(gè)字節(jié)存儲(chǔ)的字符，返回一個(gè)字符的碼點(diǎn)
• String.fromCodePoint() 從碼點(diǎn)返回對(duì)應(yīng)字符，解決之前bug

總結(jié)

以上是生活随笔為你收集整理的JS String类型整理的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。