字符串新增特性
- Unicode表示法
- 遍历接口
- 模板字符串
- 新增方法
babel-polifill 兼容 es7
unicode表示法
{
console.log('a',`\u0061`); // a a
console.log('s',`\u20BB7`); // s ₻7,当成了两个字符
console.log('s',`\u{20BB7}`); // s ��
}
遍历接口
codePointAt()
取码值
es5 时
{
let s='��';
console.log('length',s.length); // 2,码值大于两个字节,处理成4个字节,每两个字节为一个长度
console.log('0',s.charAt(0)); // 0 �,乱码,位置0的字符
console.log('1',s.charAt(1)); // 1 �,乱码,位置1的字符
console.log('at0',s.charCodeAt(0)); // at0 55362,unicode码值可以取出来
console.log('at1',s.charCodeAt(1)); // at1 57271
}
es6
{
let s1='��a';
console.log('length',s1.length); // 3
console.log('code0',s1.codePointAt(0)); // 134071,第一个字符
console.log('code0',s1.codePointAt(0).toString(16)); // 20bb7,十六进制的第一个字符,这里取了4个字节
console.log('code1',s1.codePointAt(1)); // 57271,这里取的是长度是2的字符的后两个字节,这样后面处理不会乱
console.log('code2',s1.codePointAt(2)); // 97,对应 a
}
fromCodePoint()
根据码值取字符
// 根据码值取字符
{
// es5
console.log(String.fromCharCode("0x20bb7")); // ஷ,乱码
// es6,处理大于两个字节的 unicode 字符
console.log(String.fromCodePoint("0x20bb7")); // ��
}
字符串遍历器接口
let of
// 字符串编译器接口
{
let str='\u{20bb7}abc';
for(let i=0;i<str.length;i++){
console.log('es5',str[i]); // � � a b c,前两个是乱码
}
// 通过字符串遍历器接口,处理字符串中包含unicode编码大于0xFFFF的情况
for(let code of str){
console.log('es6',code); // �� a b c
}
}
模板字符串
{
let name="list";
let info="hello world";
let m=`i am ${name},${info}`;
console.log(m); // 'i am list,hello world'
}
其他 api
判断是否包含
{
let str="string";
// 字符串是否包含某些字符
console.log('includes',str.includes("c")); // false,判断是否包含...
// 字符串是否以某些字符起始
console.log('start',str.startsWith('str')); // true,判断是否以...起始
// 字符串是否以某些字符结尾
console.log('end',str.endsWith('ng')); // true
}
字符串复制
{
let str="abc";
console.log(str.repeat(2)); // 'abcabc',字符串复制
}
字符串补白
应用场景:日期补白,彩票补白。
注意:es7的未定稿方法,编译需要引入 polifill 包,npm 对应是 babel-polyfill。
{
// 向前补白
console.log('1'.padStart(2,'0')); // 01,参数1为长度设置,参数2为补白内容
// 向后补白
console.log('1'.padEnd(2,'0')); // 10
}
标签模板
应用场景:
- 过滤 html 字符串时,如防止 xss 攻击时
- 处理多语言转换时,通过函数返回不同的结果
{
let user={
name:'list',
info:'hello world'
};
console.log(abc`i am ${user.name},${user.info}`); // ["i am ", ",", "", raw: Array(3)] "list" "hello world"
function abc(s,v1,v2){
console.log(s,v1,v2); // i am ,,,listhello world
return s+v1+v2
}
}
字符串不换行
{
console.log(String.raw`Hi\n${1+2}`); // Hi\n3,不换行
console.log(`Hi\n${1+2}`); // Hi换行3,换行
}