解决slice截取字符串出现乱码的问题

引言

在开发中，我们经常会截取字符串，平常用的比较多的方法就是slice和substring，但是有的小伙伴通过slice截取的时候，经常会出现乱码的问题，我们来看一下

现在有这样一段代码，截取字符串0-1位置的字符

var str = "😂111"
console.log(str.slice(0, 1));//打印�

 诶，很奇怪，怎么出现乱码了呢？？？

我们再打印一下0-2位置的字符呢

var str = "😂111"
console.log(str.slice(0, 2));//打印😂

诶，正确了！

我们打印一下表情的lentgh属性试一下

var str = "😂"
console.log(str.length);//2

 我们会发现，输出了2，可是我们的表情明明只是一个字符啊

 码元和码点

码元（Code Point）

是 Unicode 编码中一个字符的唯一标识，通常以十六进制表示，如 U+4F60 表示汉字“你”

码点（Code Unit）

在 UTF-8 编码中，字符可以占用多个字节。一个字节或多个字节的组合用来表示一个码点。

 当在 JavaScript 中进行字符串操作时，特别是涉及到 Unicode 字符（尤其是多字节字符）时，使用 length 属性、slice 和 substring 方法可能会导致一些问题，因为它们是以码元为单位，而不是以码点为单位来处理字符串的。

 解决方案

使用Array.from

使用 Array.from 将字符串转换为数组，从而正确地处理 Unicode 字符：

let str = "😂";
let arr = Array.from(str);
console.log(arr.length); // 输出 1，正确计算为 1 个字符

裁剪数组

let str = "😂11";
let arr = Array.from(str);
let newStr = arr.slice(0, 1)
console.log(newStr);//输出😂

另外还有一种通过String.prototype.codePointAt()计算码点的位置，然后通过定义指针，自己封装方法，本文暂不展示了