String類型是字符串的對象包裝類型，包含字符串的所有方法，在js中有著廣泛的使用，本文對字符串的使用方法做一些總結。

1、字符方法

用于訪問字符串中特定字符的方法。

1、charAt()

• 接收一個基于索0的參數，返回給定位置的字符

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

2、charCodeAt()

• 接收一個基于索0的參數，返回給定位置字符的字符編碼

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

3、索引值

• 方括號表示法
• IE7 及更早版本，返回undefined

str = "123" str[0] // 1 str[3] // undefined復制代碼

2、字符串操作方法

1、concat()

• 用于將一個或者多個字符串拼接起來，返回拼接得到的字符串
• 實踐中更多的使用加號操作符“+”，簡便易行

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

2、slice()

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

3、substring()

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

4、substr()

• 第二個參數指定返回的字符個數
• 若參數為負數，會把第一個參數加上字符串的長度，第二個參數轉換為0

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

3、字符串位置方法

1、indexOf()

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

2、lastIndexOf()

• 從后向前搜索

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

4、trim()方法

• 創建一個字符串的副本，刪除前置以及后綴的所有空格，返回結果

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

5、字符串大小寫轉換方法

• toLowerCase()，toUpperCase()， 大小寫轉換的方法
• 針對部分地區，toLocaleLowerCase()，toLocaleUpperCase()

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

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

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

1、match()

• 接收一個參數，正則表達式或者一個RegExp對象
• 如果沒有找到任何匹配的文本， match() 將返回 null
  
• 若找到匹配的文本，返回一個數組。該數組的第 0 個元素存放的是匹配文本，而其余的元素存放的是與正則表達式的子表達式匹配的文本。除了這些常規的數組元素之外，返回的數組還含有兩個對象屬性。index 屬性聲明的是匹配文本的起始字符在 stringObject 中的位置，input 屬性聲明的是對 stringObject 的引用
  
• 如果 regexp 具有標志 g，則 match() 方法將執行全局檢索，找到 stringObject 中的所有匹配子字符串。若沒有找到任何匹配的子串，則返回 null。如果找到了一個或多個匹配子串，則返回一個數組。不過全局匹配返回的數組的內容與前者大不相同，它的數組元素中存放的是 stringObject 中所有的匹配子串，而且也沒有 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"] 復制代碼

2、search()

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

3、replace()

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

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"復制代碼

4、split()

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

7、localeCompare()方法

• 比較兩個字符串
• 如果字符串在字母表中應該排在字符串參數之前，返回一個負數
• 如果字符串等于字符串參數，返回0
• 如果字符串在字母表中應該排在字符串參數之后，返回一個正數

8、fromCharCode()方法

• 接收一或多個字符編碼，然后將它們轉換成一個字符串

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

ES6 新增

1、字符串的遍歷接口

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

2、at()

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

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

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

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

4、repeat()

• 返回一個字符串，表示將原字符串重復n次
• 參數是小數，會被向下取整
• 參數是負數或者infinity，報錯
  str = "hello".repeat(3) str // "hellohellohello"復制代碼

5、模板字符串

• 模板字符串是增強版的字符串，用反引號（`）標識。它可以當做普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量
• 嵌入變量，需要將變量寫在$()中
• 大括號中可以放入任意的js表達式，可以進行運算，以及引用對象屬性，甚至調用函數

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"復制代碼

6、其它

• codePointAt()? ?正確處理4個字節存儲的字符，返回一個字符的碼點
• String.fromCodePoint() 從碼點返回對應字符，解決之前bug

總結

以上是生活随笔為你收集整理的JS String类型整理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。