JavaScript字串常用方法

• charAt()
• concat()
• indexOf(), lastIndexOf()
• localeCompare()
• slice()
• split()
• substr(), substring()
• match()
• replace()
• search()
• toLocaleLowerCase(), toLocaleUpperCase(),toLowerCase(),toUpperCase()
• includes(), startsWith(), endsWith()
• repeat()
• 模板字串````反引號

charAt()

charAt,回傳指定索引位置處的字符，它的功能實作類似于陣列用中括號獲取相應下標位置的資料，當然，字串也可以使用中括號，下面看代碼： `

var str1 = 'abcdefg';
console.log(str1.charAt(2)) // 輸出 'c'
console.log(str1[2]) // 輸出 'c'   
復制代碼

`charAt在日常開發的使用中，更多會用于處理兼容IE的低版本瀏覽器，IE6，7；在低版本的IE瀏覽器，中括號的方式是會輸出undefined;

注意事項：charAt 方法回傳一個字符值，該字符值等于指定 index 位置的字符， 一個字串中的第一個字符位于索引位置 0，第二個字符位于索引位置 1，依此類推， 超出范圍的 index 回傳空字串，

concat()

concat,在陣列的常用方法里也有這個方法，功能是用來回傳一個合并拼接兩個或兩個以上陣列的，字串這個concat也是一樣的功能，回傳一個兩個或者兩個以上的字串拼接的字串，并不影響原字串，下面看代碼： `

var str1 = 'abcdefg', str2 = '1234567';
var str3 = str1.concat(str2);
console.log(str3) // 輸出 'abcdefg1234567'
復制代碼

` 注意事項：concat 方法的結果等同于：result = string1 + string2 + string3 + stringN，源字串中或結果字串中的值的變化都不會影響另一個字串中的值，如果有不是字串的引數，則它們在連接到 string1 之前將首先被轉換為字串，

indexOf,lastIndexOf

indexOf,回傳一個字符在字串中首次出現的位置，lastIndexOf回傳一個字符在字串中最后一次出現的位置，這兩個方法功能類似，在實際使用中都是根據需要使用，下面看代碼： `

var str1 = 'abcdcefcg';
console.log(str1.indexOf('c')) // 輸出 '2'
console.log(str1.lastIndexOf('c')) // 輸出 '7'
復制代碼

`indexOf和lastIndexOf都接收兩個引數，第一個是要索引的字符，必填引數，第二個是可選引數，就是索引位置，從什么地方開始索引查找必填字符， 注意事項：indexOf,lastIndexOf方法回傳 String 物件中的子字串的位置，如果未找到子字串，則回傳 -1，如果 startindex 為負，則 startindex將被視為零，如果它大于最大索引，則將其視為最大索引，

localeCompare()

localeCompare() 方法用本地特定的順序來比較兩個字串，localeCompare 方法對 stringVar 和 stringExp 執行區磁區域設定的字串比較，并回傳以下結果之一，這取決于系統默認區域設定的排序順序：-1，如果 stringVar 排在 stringExp 之前，+1，如果 stringVar 排在 stringExp 的后面， 如果兩個字串相等，則為 0（零）： `

str1 = 'GBDCFEA'
var strArr = str1.split('').sort(function(strVar, strExp){
	return strVar.localeCompare(strExp)
})
console.log(strArr.join('')) // ABCDEFG  
復制代碼

` 注意事項:字串排序的方法本身也是借助陣列的sort來實作的，sort方法的用法請見我的javaScript陣列之陣列常用方法

slice()

slice提取字串的片斷，并把提取的字串作為新的字串回傳出來，下面請看代碼： `

var str = 'abcdefg';
str.slice() // 輸出 'abcdefg', 不傳遞引數默認復制整個字串
str.slice(1) // 輸出 'bcdefg',傳遞一個，則為提取的起點，然后到字串結尾
str.slice(2, str.length-1)// 輸出'cdef',傳遞兩個，為提取的起始點和結束點
復制代碼

`注意事項：如果 起始點 為負，則將其視為 length + 起始點，此處 length 為字串的長度，如果 結束點 為負，則會將其視為 length + 結束點，如果省略 結束點，則將一直復制到 stringObj 的結尾，如果 結束點 出現在 起始點 之前，則不會將任何字符復制到新字串中，

split()

使用指定的分隔符將一個字串拆分為多個子字串，并將其以陣列形式回傳，下面看例子： `

var str = 'A*B*C*D*E*F*G';
str.split('*') // 輸出 ["A", "B", "C", "D", "E", "F", "G"]
復制代碼

`split是字符當中使用的非常頻繁的一個方法，多數情況下是把字串轉陣列來處理，比如前面的localeCompare()就有使用到，注意事項:split接收兩個可選引數：引數一:一個字串或正則運算式物件，標識用于分隔字串的一個或多個字符，如果忽略該引數，則將回傳包含整個字串的單元素陣列;引數二：一個用于限制陣列中回傳的元素數量的值，

substr(), substring()

截取一個字串的片段，并回傳截取的字串，這兩個方法的功能非常的類似，下面先看代碼演示： `

var str = 'ABCDEFGHIJKLMN';
str.substr(2) // 輸出 'CDEFGHIJKLMN'
str.substring(2)   // 輸出 'CDEFGHIJKLMN'

str.substr(2, 9) // 輸出 'CDEFGHIJK'
str.substring(2, 9)   // 輸出 'CDEFGHI'
復制代碼

` substr和substring這兩個方法不同的地方就在于引數二，substr的引數二是截取回傳出來的這個字串指定的長度，substring的引數二是截取回傳這個字串的結束點，并且不包含這個結束點，而它們的引數一，都是一樣的功能，截取的起始位置， 注意事項：substr的引數二如果為0或者負數，則回傳一個空字串，如果未填入，則會截取到字串的結尾去，substring的引數一和引數二為NAN或者負數，那么它將被替換為 0，

match()

match() 方法可在字串內檢索指定的值，或找到一個或多個正則運算式的匹配，并回傳一個包含該搜索結果的陣列，下面請看例子：`

var str = '2018年結束了，2019年開始了，2020年就也不遠了';
var rex = /\\d+/g  // 這里是定義匹配規則，匹配字串里的1到多個數字
str,match(rex)  //輸出符合匹配規則的內容，以陣列形式回傳 ['2018', '2019', '2020']
str.match('20')// 不使用正則 ["20", index: 0, input: "2018年結束了，2019年開始了"]
復制代碼

` 注意事項:如果 match 方法沒有找到匹配，將回傳 null，如果找到匹配，則 match 方法會把匹配到以陣列形式回傳，如果正則規則未設定全域修飾符g，則 match 方法回傳的陣列有兩個特性：input 和 index， input 屬性包含整個被搜索的字串， index 屬性包含了在整個被搜索字串中匹配的子字串的位置，

replace() replace，翻譯成中文就是替換，把一個目標字串當中的文本，替換成自己需要的字符，replace接收兩個引數，引數一是需要替換掉的字符或者一個正則的匹配規則，引數二，需要替換進去的字符，仔實際的原理當中，引數二，你可以換成一個回呼函式，具體實作請看代碼： `

var str = '2018年結束了，2019年開始了，2020年就也不遠了',str1='',str2='';
var rex = /\\d+/g  // 這里是定義匹配規則，匹配字串里的1到多個數字
str1 = str.replace(rex, '****') //輸出："****年結束了，****年開始了,****年也不遠了";
str2 = str.replace(rex, function(item){
    console.log(arguments)  // 看下面的圖片
	var arr = ['零', '壹', '貳', '叁', '肆', '伍', '陸', '柒', '捌', '玖']
	var newStr = '';
	item.split('').map(function(i){
		newStr += arr[i]
	})					
	return newStr       
})
console.log(str2)// 輸出：貳零壹捌年結束了，貳零壹玖年開始了,貳零貳零年也不遠了
復制代碼

`

https://user-gold-cdn.xitu.io/2018/9/25/16610b1a7f3edd3f?imageView2/0/w/1280/h/960/format/webp/ignore-error/1

在這個代碼體里，我們用了兩種替換，第一種是直接把引數二定義成一個用于替換進去的字符，第二種是把引數二換成了一個回呼函式，兩種方式，其實都可以，這個取決于我們的作業需要，就以上面這個例子來說，如果我們是轉換成大寫的話，那就用回呼函式的方式，其實回呼函式的內部機制里，也是根據正則的匹配規則去匹配自己需要被替換掉的字符，把匹配到的字符，就可以在回呼函式里寫自己的邏輯，然后就把它回傳出去，回呼函式本身，接收三個引數，引數一是匹配到的需要被替換掉的字符，引數二是匹配到的需要被替換掉的字符在原字串中開始的位置，引數三就是原字串，

search()

search，翻譯成中文就是搜索，在目標字串中搜索與正則規則相匹配的字符，搜索到，則回傳第一個匹配項在目標字串當中的位置，沒有搜索到則回傳一個-1， `

var str = '2018年結束了，2019年開始了，2020年就也不遠了',str1='',str2='';
var rex = /\\d+/i  // 這里是定義匹配規則,匹配字串里的1到多個數字
str.search(rex) // 輸出 0  這里搜索到的第一項是從位置0開始的
復制代碼

`

toLocaleLowerCase(), toLocaleUpperCase(),toLowerCase(),toUpperCase()

toLocaleLowerCase和toLowerCase都是把字母轉換成小寫，toLocaleUpperCase和toUpperCase則是把字母轉換成大寫，toLocaleLowerCase和toLocaleUpperCase 方法轉換字串中的字符，同時考慮到宿主環境的當前區域設定，大多數情況下，此結果與使用 toLowerCase和toUpperCase 方法所獲得的結果相同，如果語言規則與常規的 Unicode 大小寫映射沖突，則結果將會不同， `

var str = 'abcdefg';
str.toLocaleUpperCase();    // 輸出：'ABCDEFG'
str.toUpperCase();  //  輸出： 'ABCDEFG'
復制代碼

`

includes(), startsWith(), endsWith()

includes，startsWith，endsWithes6的新增方法，includes用來檢測目標字串物件是否包含某個字符，回傳一個布林值，startsWith用來檢測當前字符是否是目標字串的起始部分，相對的endwith是用來檢測是否是目標字串的結尾部分，請看演示代碼： `

var str = 'Excuse me, how do I get to park road?';
str.includes('how') // 輸出：true;
str.startsWith('Excuse')    // 輸出： true;
str.endsWith('?')   // 輸出： true;
復制代碼

這三個方法都支持第二個引數，表示開始搜索的位置，

var str = 'Excuse me, how do I get to park road?';
str.includes('how', 0) // 輸出：true;
str.startsWith('Excuse', 0)    // 輸出： true;
str.endsWith('?', 0)   // 輸出： true;
復制代碼

`

repeat() 回傳一個新的字串物件，新字串等于重復了指定次數的原始字串，接收一個引數，就是指定重復的次數， `

var str = 'http';
str.repeat(3)   // 輸出： 'httphttphttp';
復制代碼

`注意：當該引數為負或正無窮時，此方法會引發 RangeError，

模板字串``反引號

反引號是es6新引入的定義字串的方式，用``包裹需要定義成字串的字符，模板字串（template string）是增強版的字串，用反引號標識，它可以當作普通字串使用，也可以用來定義多行字串，或者在字串中嵌入變數，下面看代碼演示： `

var str = '<https://juejin.im/timeline>';   // 以前的定義方式
var str1 = `https://juejin.im/timeline`;    // 反引號的方式
復制代碼

定義多行字串

var strHtml = '<ul>' +
    '<li></li>' +
    '<li></li>' +
'</ul>';   // 以前的定義方式
var strHtml1 = `<ul>
    <li></li>
    <li></li>
</ul>`;    // 反引號的方式,使用模板字串表示多行字串，所有的空格和縮進都會被保留在輸出之中，
復制代碼

` 傳遞變數,模板字串中嵌入變數，需要將變數名寫在${}之中,大括號內部可以放入任意的 JavaScript 運算式，可以進行運算，以及參考物件屬性,模板字串之中還能呼叫函式，

`

var n1 = 'li壹',n2 = 'li貳'
var strHtml = '<ul>' +
    '<li>'+n1+'</li>' +
    '<li>'+n2+'</li>' +
'</ul>';   // 以前的定義方式
var strHtml1 = `<ul>
    <li>${n1}</li>
    <li>${n2}</li>
</ul>`;    // 反引號的方式
document.body.appendChild(strHtml)
復制代碼

`

結語