字符串新增特性
Unicode表示法、遍历接口、模板字符串、新增方法(10种)。
1、Unicode表示法
{
console.log('a','\u0061');
}
输出:a a
当unicode的编码大于0xFFFF(码值大于2个字节编码)时,会如何?
{
console.log('s','\u20BB7');
}
输出:s ₻7
很明显没有按一个字符来处理。因为该值已超过了0xFFFF。
在es6中如何处理大于0xFFFF的编码呢?
☞用“{}”将unicode编码包起来即可。
{
console.log('s','\u{20BB7}');
}
输出:
接下来,说一下API:
{
let s = 'a';
console.log('length',s.length);
}
输出:length 1
输出:length 2
发现:第1个字符和第2个字符是乱码,而它们的码值都能取出来。在es5中对unicode的处理是不到位的。
在es6中是如何处理这个值?
☞codePointAt()–>取字符的码值(es6新增的方法)
codePointAt()☞会自动计算4个字节的码值
charCodeAt()☞取2个字节
处理方式:1只取后2个字节。
给出码值如何找对应的字符?
常用的和字符串结合的遍历器:
{
let str = '\u{20bb7}abc';
for (let i = 0; i < str.length; i++) {
console.log('es5',str[i]);
}
}
es5的做法☞前2个出现乱码
{
let str = '\u{20bb7}abc';
for (let code of str) {
console.log('es6',code);
}
}
这里未用i的循环,而是用了for of这么一个遍历器。
通过字符串的遍历器接口,就可正常的处理字符串中包含unicode的编码大于0xFFFFF的处理情况☞使用频率较高!!
实用方法
如:判断字符串中是否包含某些字符,或判断一个字符串是否以某些字符为起始的或截止的。
字符串中是否包含r字符:
{
let str = "string";
console.log('includes',str.includes("r"));
}
输出:includes true
如代码如下:
{
let str = "string";
console.log('includes',str.includes("c"));
}
输出:includes false
判断字符是否以哪些字符为起始:
{
let str = "string";
console.log('start',str.startsWith("str"));
}
输出:start true
判断字符是否以哪些字符为截止:
{
let str = "string";
console.log('end',str.endsWith("ng"));
}
输出:end true
这3个方法使用频率较高!!
还有一个API是经常使用的:
☞字符串的复制–repeat(次数),也可用“+=”,但es6的处理方式更简便,只需改个参数即可。
{
let str = "string";
console.log(str.repeat(2));
}
输出:stringstring
重要概念☞模板字符串
==>把数据和模板最终拼成一个带结果的字符串
注意:
1、模板必须由数字1按键左边的符号包起来““”(非单引号也非双引号);
2、数据项需通过“${}”包起来。
{
let name = "list";
let info = "hello";
let a = `i am ${name},${info}`;
console.log(a);
}
输出:i am list,hello
ES7推出了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart用于头部补全,padEnd用于尾部补全。
{
console.log('1'.padStart(2,'0'));
}
输出:01
{
console.log('1'.padEnd(2,'0'));
}
输出:10
☞标签模板
{
let user={
name:'list',
info:'hello'
};
abc`i am ${user.name},${user.info}`;
function abc(s,v1,v2){
console.log(s,v1,v2);
}
}
这种写法就叫做标签模板。(加了一个abc且abc又是一个函数)
运行结果:
{
let user={
name:'list',
info:'hello'
};
abc`i am ${user.name},${user.info}`;
function abc(s,v1,v2){
console.log(s,v1,v2);
return s+v1+v2;
}
}
发现加了return也没有变化。
{
let user={
name:'list',
info:'hello'
};
console.log(abc`i am ${user.name},${user.info}`);
function abc(s,v1,v2){
console.log(s,v1,v2);
return s+v1+v2;
}
}
运行结果:i am ,,,listhello
把字符串数组转化成字符串。
标签模板的作用:
1、过滤html字符串时,防止xss攻击;
2、处理多语言转换–如中文、英文、德文,用一套模板,通过不同的return返回不同的结果。
如上,函数abc()的结果即为return返回的最后结果,拿到的v1,v2变量、原生的字符串模板,就可处理任何你想要的逻辑。
字符串中还有一个API☞☞.raw“:
{
console.log(String.raw`Hi\n${1+2}`);
console.log(`Hi\n${1+2}`);
}