前言

在js中我們對(duì)字符串進(jìn)行一部分截取，可以使用slice()函數(shù)截取，也可以直接用substring()函數(shù)來(lái)截取，但是截取也有可能出bug

const str='小??和小??今天吃了50塊錢的KFC'
console.log(str.slice(0,5));

可以在控制臺(tái)看到，本來(lái)應(yīng)該截取的字符串是'小??和小??'才對(duì)，卻少了一個(gè)字，這是什么原因呢?

js的字符編碼

在很早的時(shí)候，js使用的編碼規(guī)范是16位的字符編碼(USC-2)，規(guī)定了每一個(gè)字對(duì)應(yīng)16位的空間，16位的空間稱為碼元，字符串的所有屬性和方法(像是 length 屬性和 chatAt 方法)都是基于 16 位的碼元，但是后來(lái)生僻字越來(lái)越多，16位的空間不夠用了

就把編碼方式換成了utf-16，utf-16允許一個(gè)文字占用16位的空間也就是一個(gè)碼元或者32位的空間就是兩個(gè)碼元，一些特殊的文字就占用了兩個(gè)碼元，像'??'和'??'就占用了兩個(gè)碼元

使用碼元截取的bug

我們使用的length屬性實(shí)際上數(shù)的是碼元的數(shù)量，而使用slice()方法截取字符串是根據(jù)下標(biāo)來(lái)截取的，下標(biāo)也是指的碼元的下標(biāo)

比如我們截取'小??'這兩個(gè)字，將slice()截取的范圍改為0到1也就是console.log(str.slice(0,2))， '??'占用了兩個(gè)碼元，slice()只截取到了它第一個(gè)碼元的值，一個(gè)碼元形不成文字，這樣得到的就不是一個(gè)完整的字，而是一個(gè)亂碼了

使用碼點(diǎn)來(lái)正確截取字符串

既然使用碼元獲取不到正確的字符，那就可以使用碼點(diǎn)來(lái)截取了，什么是碼點(diǎn)呢？碼點(diǎn)不管你占用多少空間，一個(gè)文字就占一個(gè)碼點(diǎn)，一個(gè)碼點(diǎn)對(duì)應(yīng)一個(gè)碼元或者兩個(gè)碼元，使用碼點(diǎn)截取就要寫一個(gè)截取的函數(shù)了

我們?cè)谧址脑蛯?duì)象上新建一個(gè)函數(shù)，傳入一個(gè)截取的起始坐標(biāo)和結(jié)束坐標(biāo)，準(zhǔn)備好一個(gè)result變量存儲(chǔ)最終截取到的結(jié)果，和兩個(gè)代表碼元和碼點(diǎn)指針的變量

String.prototype.strSlice=function(sStart,sEnd){//截取的起始坐標(biāo)和結(jié)束坐標(biāo)
  let result='' //截取的結(jié)果
  let dIndex=0 //碼點(diǎn)的指針
  let yIndex=0 //碼元的指針
}

接下來(lái)就要不斷地向右運(yùn)行碼點(diǎn)和碼元的指針進(jìn)行截取，所以需要一個(gè)無(wú)限循環(huán)，當(dāng)碼點(diǎn)的指針到達(dá)了結(jié)束的位置或者碼元的指針超出了數(shù)組的長(zhǎng)度就結(jié)束循環(huán)返回最終截取的結(jié)果

while(1){
    if(dIndex>=sEnd || yIndex>=this.length){ //結(jié)束循環(huán)條件
      break;
    }
    //截取操作
}
return result //返回截取結(jié)果

每一次循環(huán)就碼點(diǎn)和碼元移動(dòng)一次指針，碼點(diǎn)直接每次移動(dòng)1位，但是一個(gè)字符會(huì)存在兩個(gè)碼元，這樣碼元和碼點(diǎn)就對(duì)應(yīng)不上了，需要根據(jù)字符占據(jù)的碼元數(shù)量來(lái)移動(dòng)

在ES6為我們提供了一個(gè)函數(shù)codePointAt可以得到碼點(diǎn)的值，碼點(diǎn)的值有可能是16位或者32位的，而一個(gè)文字占用16位，如果碼點(diǎn)的值超過(guò)16位說(shuō)明這個(gè)文字占用了兩個(gè)碼元，我們就可以通過(guò)碼點(diǎn)的值判斷碼元的指針應(yīng)該移動(dòng)1位或者2位

while(1){
    if(dIndex>=sEnd || yIndex>=this.length){ //結(jié)束循環(huán)條件
      break;
    }
    //截取操作
    const point=this.codePointAt(yIndex) //獲取碼點(diǎn)的值
    
    dIndex++ //碼點(diǎn)指針每次+1
     yIndex+=point > 0xffff ? 2:1 //判斷碼點(diǎn)的值是否超過(guò)16位，超過(guò)占用2個(gè)碼元，指針+2，沒(méi)有+1
}
return result //返回截取結(jié)果

碼點(diǎn)和碼元的指針移動(dòng)已經(jīng)同步了，對(duì)應(yīng)在同一個(gè)文字上，然后就可以截取文字了。當(dāng)碼點(diǎn)的指針大于等于起始坐標(biāo)就把對(duì)應(yīng)的文字取出來(lái)放在result里，不能通過(guò) this[yIndex] 取值，不然還是取的碼元對(duì)應(yīng)的值，得通過(guò)碼點(diǎn)對(duì)應(yīng)的值取出來(lái)，在ES6里還提供了一個(gè)函數(shù)fromCodePoint，按照碼點(diǎn)的值恢復(fù)這個(gè)文字，將文字加到result里就行了

String.prototype.strSlice=function(sStart,sEnd){//截取的起始坐標(biāo)和結(jié)束坐標(biāo)
  let result='' //截取的結(jié)果
  let dIndex=0 //碼點(diǎn)的指針
  let yIndex=0 //碼元的指針
  while(1){
    if(dIndex>=sEnd || yIndex>=this.length){ //結(jié)束循環(huán)條件
      break;
    }
    //截取操作
    const point=this.codePointAt(yIndex) //獲取碼點(diǎn)的值
    if(dIndex>=sStart){
      result+=String.fromCodePoint(point)
    }

    dIndex++
    yIndex+=point > 0xffff ? 2:1 //判斷碼點(diǎn)的值是否超過(guò)16位，超過(guò)占用2個(gè)碼元，指針+2，沒(méi)有+1
  }
  return result //返回截取結(jié)果
}

最后調(diào)用strSlice方法，傳入截取的起始坐標(biāo)和結(jié)束坐標(biāo)，截取到的結(jié)果也是我們想要的

console.log('截取的結(jié)果為:',str.strSlice(0,5));

總結(jié)

到此這篇關(guān)于JS字符串截取出現(xiàn)的bug以及解決方式的文章就介紹到這了,更多相關(guān)JS字符串截取bug內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！