一、常用的字符串转数组方法
1、使用split方法将字符串按照指定分隔符转为数组
let str = "今天,天气,真好";
let arr = str.split(","); // ["今天", "天气", "真好"]2、使用Array.from方法将字符串转为数组
let str = "hello world";
let arr = Array.from(str); // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]3、使用ES6的扩展运算符将字符串转为数组
let str = "hello world";
let arr = [...str]; // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]二、处理特殊字符的字符串转数组方法
1、处理中文字符串或者含有emoji表情的字符串
let str = "今天?天气?真好";
let arr = Array.from(str); // ["今", "天", "?", "天", "气", "?", "真", "好"]2、处理含有非ASCII字符的字符串
let str = "hello 你好 world";
let arr = Array.from(str); // ["h", "e", "l", "l", "o", " ", "你", "好", " ", "w", "o", "r", "l", "d"]三、优化字符串转数组的性能
1、使用字符串扩展运算符代替split方法
split方法在处理大量字符串时，性能会受到影响，可以使用字符串扩展运算符代替split方法，提高性能
let str = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z";
let arr = [...str]; // ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"]2、使用for循环代替forEach方法
forEach方法会创建回调函数的执行上下文，而使用for循环则可以减少创建上下文的次数，提升性能
let str = "abcdefghijklmnopqrstuvwxyz";
let arr = [];
for(let i=0; i<str.length; i++) {
arr[i] = str.charAt(i);
} // ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"]四、字符串转数组的兼容性问题
1、IE浏览器不支持Array.from方法和字符串扩展运算符
可以使用ES5的split方法来兼容IE浏览器
var str = "hello world";
var arr = str.split(''); // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]2、处理中文字符串或含有emoji表情的字符串时，需要使用ES6的polyfill库进行兼容
import "core-js/modules/es6.string.from-code-point";
let str = "今天?天气?真好";
let arr = Array.from(str); // ["今", "天", "?", "天", "气", "?", "真", "好"]五、总结
通过本篇文章的介绍，我们可以学习到前端字符串转数组的常用方法，如使用split方法、Array.from方法和扩展运算符等。同时，也学习到了处理字符集不同、中文字符串以及含有emoji表情的字符串的处理方法。为了提升性能，我们也介绍了使用for循环代替forEach方法，使用字符串扩展运算符代替split方法等方法。最后，我们也解决了IE浏览器的兼容性问题。了解这些知识点，对我们的前端开发工作都是非常有帮助的。
原创文章，作者：ZQRZY，如若转载，请注明出处：https://www.506064.com/n/370726.html
微信扫一扫 
支付宝扫一扫 