【JavaScript】 手撕字符串截取的bug -- 码元和码点

🧑‍💼个人简介 ：上市公司在职员工，一个热爱生活和学习的平凡人🍬

🖥️ 知识总结 ： input 输入框限制只能输入两位有效小数

👉 你的一键三连是我更新的最大动力❤️！

目录

1、码元

要求

 思路

 代码

2、码点

概念

思路

 代码

1、码元

   要求

 下面有一个字符串 " 我是吉娃娃🐻他说的汾 " ，从这个字符串中截取出 "吉娃娃🐻"。

 思路

  我相信很多小伙伴 首先想到的应该是利用slice、substr等平时常用的字符串截取方法；利用索引index 进行截取。

 代码

   const str = '我是吉娃娃🐻他说的汾';
   console.log(`我是slice方法的结果:-----` + str.slice(2,6))
   console.log(`我是substr方法的结果:-----` + str.substr(2,4))

  上述两个方法的执行结果是：

我是slice方法的结果:-----吉娃娃�
我是substr方法的结果:-----吉娃娃�

  为什么会出现上面这样的效果呢？在很早的时候，JS对字符的编码使用的编码规范是ucs-2；这种规范里面呢它规定每个文字他对应16位的空间，它把这个16位的空间称之为码元。一个文字呢就对应一个码元，但是后来随着生僻字越来越多和emoji表情的加入，16位的空间就不够用了，于是JS把编码方式换成了utf-16,它允许一个文字可以占用16位的空间就是一个码元；也可以占用32位的空间两个码元，而我们在JS中使用的length属性实际是数的码元。

  console.log(`🐻的索引是:-----` + '🐻'.length)

 🐻的索引是:----- 2

我们的字符串[x]取的也是码元的数量，比如说：

  console.log(`🐻取下标0是:-----` + '🐻'[0])

 🐻取下标0是:-----�

所以我们上面平时用的截取字符串方法其实都是通过码元去截取的，由于emoji表情 ' 🐻 '它占两个码元，我们截取从下标为  2  的码元 截取到下标为 5 的码元，因为' 🐻 '占据两个码元，所以我们的截取就形不成文字；最后出现了� 乱码。

 明白了码元的概念后，当然对于这个题目截取出 "吉娃娃🐻"我们只需要将上面的代码稍微修改一下就能得到我们的答案了

   const str = '我是吉娃娃🐻他说的汾';
   console.log(`我是slice方法的结果:-----` + str.slice(2,7))
   console.log(`我是substr方法的结果:-----` + str.substr(2,5))

执行的结果是：

我是slice方法的结果:-----吉娃娃🐻
我是substr方法的结果:-----吉娃娃🐻

但我们在项目中遇到的往往没有这面简单；这里博主列举一个最常见的情景，就是我们需要截取的字符串是用户自己手动输入的，我们完全不清楚他到底要输入什么，这个时候我们又该怎么处理呢？其实也不难了解我们的码点就行了。

2、码点

概念

    一个文字就占用一个码点，一个码点可以对应16位的空间，也可以对应32位的空间，所以说如果一个文字是一个码元的话它就对应一个码点，如果它占用两个码元的话那么就是一个码点对应两个码元，所以我们的截取逻辑是不是就应该从码点来截取。

思路

    通过es6 给我们提供的一个方法codePointAt 来获取码点的值，然后和16位空间的最大值作比较，判断出一个码点对应的是几个码元。例如说：🐻的码点值是 128059，16位空间的最大值是65535，然后比较两个值的大小如果码点值大于0xffff，说明就占用两个码元；否则就占一个码元。

  console.log('🐻'.codePointAt(0) , 0xffff)

  128059  ， 65535

 代码

    const str = '我是吉娃娃🐻他说的汾';
    String.prototype.sliceByPoint = function(start,end){
    let pIndex = 0,cIndex = 0,result ='';
        while(1){
            if(pIndex >= end || cIndex >= this.length){
                break
            };
            const point =  this.codePointAt(cIndex);
            if(pIndex >= start){
                result += String.fromCodePoint(point);
            }
            pIndex ++ ;
            cIndex += point > 0xffff ? 2 :1;
        }
        return result
    }
    console.log(`本次通过码点截取的结果是-----` +str.sliceByPoint(2,6))

执行的结果是：

本次通过码点截取的结果是------吉娃娃🐻

到这里这个问题我们就解决了，这样不管用户输入的是生僻字还是emoji表情我们都不需要做其他的特殊处理了。