🧑💼个人简介 :上市公司在职员工,一个热爱生活和学习的平凡人🍬
🖥️ 知识总结 : input 输入框限制只能输入两位有效小数
👉 你的一键三连是我更新的最大动力❤️!
目录
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表情我们都不需要做其他的特殊处理了。