ES6字符串扩展

2019-06-17  本文已影响0人  易路先登
1.加强了对 Unicode 的支持

ES6允许用以下两种方式表示一个字符:
(1)"\u0061",这种方式只能表示unicode码点小于0xFFFF的字符,超出则必须用两个双字节的形式表示。

console.log('a','\u0061');//a
console.log('a','\uD842\uDFB7');//𠮷

(2)"\u{61}",这种方式可以表示unicode码点大于0xFFFF的字符。

console.log('\u{20BB7}');//𠮷
2.新增Unicode码值api

ES5中获取字符串长度、对应字符、对应字符码值用法如下:

var str = '𠮷';
//str.length 获取字符串长度
console.log(str.length);//2 因'𠮷'字默认编码是'\uD842\uDFB7',所以长度为2
//str.charAt(num) 获取字符串中对应下标num位置的字符
console.log(str.charAt(0));//�乱码
//str.charCodeAt(num) 获取字符串中对应下标num位置的字符的Unicode编码
console.log(str.charCodeAt(0));//55362

ES6中获取字符串长度、对应字符、对应字符码值用法如下:
新增获取对应字符码值api str.codePointAt()

let str = '𠮷';
//str.length 获取字符串长度
console.log(str.length);//2 因'𠮷'字默认编码是'\uD842\uDFB7',所以长度为2
//str.charAt(num) 获取字符串中对应下标num位置的字符
console.log(str.charAt(0));//�乱码
//str.charCodeAt(num) 获取字符串中对应下标num位置的字符的Unicode编码
console.log(str.codePointAt(0));//134071 
console.log(str.codePointAt(0).toString(16));//20bb7

需要注意的是,如果长度超过2的单字符使用codePointAt方法获取第一个位置的码值时即可返回整个字符的完整码值,取第二个位置的字符码值则如ES5处理方式相同,以'𠮷'字为例,代码如下:

let str = '𠮷';
console.log(str.codePointAt(0));//134071 
console.log(str.codePointAt(0).toString(16));//20bb7
//在es5中'𠮷'字的unicode编码是'\uD842\uDFB7' 取下标为1的字符的码值,
//则结果为'\uD842\uDFB7'的后一个,即DFB7
console.log(str.codePointAt(1));//57271 
console.log(str.codePointAt(1).toString(16));//DFB7

新增码值转换为字符api String.fromCodePoint()
以'𠮷'字为例代码如下:
ES5中使用的是String.fromCharCode()api,不能正确处理码值超过0xFFFF的字符

console.log(String.fromCharCode('0x20bb7'));//乱码

ES6中是使用的是String.fromCodePoint() api

console.log(String.fromCodePoint('0x20bb7'));//𠮷
3新增字符串遍历方法

let...of
代码如下:

let str = '𠮷abc';
for(let item of str){
  console.log(item);
}
//𠮷
//a
//b
//c
4其他常用api

includes(*)判断是否包含字符*
startsWith(**)判断是否以**为起始
endsWith(**)判断是否以**为结束
repeat(num)复制字符串num次
padStart(length,'padstr')在字符串追加padstr,将字符串补全为length长度的新字符串
padEnd(length,'padstr')在字符串追加padstr,将字符串补全为length长度的新字符串
代码如下:

let str = '𠮷abc';
console.log(str.includes('a'));//true
console.log(str.startsWith('𠮷'));//true
console.log(str.endsWith('c'));//true
console.log(str.padStart(6,'0'));//𠮷abc0
console.log(str.padStart(6,'0'));//0𠮷abc
5模板字符串

使用两个反引号``将字符串包裹,可任意换行并能引用变量,代码如下:

let num = 5;
let str = `𠮷a
b${num}c`;
console.log(str);
/*输出结果为:
𠮷a
            b5c
*/

6标签模板

就是给模板字符串加个标签函数(函数名任意命名),代码如下

let name = 'qiang';
let comp = 'bc';
let newStr = abc`i am ${name},${comp}`;
function abc(arr,...variable){
    let rstr = '';
        for(let i = 0;i < arr.length-1;i++){
            rstr += arr[i]+variable[i]
        }
    return rstr ;
}
console.log(newStr);//i am qiang,bc

需要说明的是,标签函数abc的参数arr为这个字符串i am ${name},from ${comp}以变量为分隔符分割所得的数组,得['i am',',','']。variable为字符串模板中变量所组成的数组,为['qiang','bc'],标签函数abc的返回值即为标签模板的最终计算结果,为i am qiang,bc
欢迎您了解贝程教育
ES6总篇--目录

上一篇下一篇

猜你喜欢

热点阅读