ECMAScript6 新特性——“字符串的扩展”

BlackMass 发布于2019-08-19 17:59 / 2253人阅读

摘要：吉字符串的遍历器接口为字符串添加了遍历器接口，使得字符串可以被循环遍历。提供字符串实例的方法，用来将字符的不同表示方法统一为同样的形式，这称为正规化。返回布尔值，表示参数字符串是否在源字符串的头部。

1 字符串的Unicode表示法

ES6 只要将码点放入大括号，就能正确解读该字符；

var x = "u20bb7";
document.write(x); //₻7
var x = "u{20bb7}";
document.write(x); //? 可正确返回

2 codePointAt()

JavaScript对于那些需要4个字节储存的字符（Unicode码点大于0xFFFF的字符），JavaScript会认为它们是两个字符。

var s = "?";

s.length // 2
s.charAt(0) // ""
s.charAt(1) // ""
s.charCodeAt(0) // 55362
s.charCodeAt(1) // 57271

ES6提供了codePointAt方法，能够正确处理4个字节储存的字符，返回一个字符的码点。

var x = "u{20bb7}";
console.log(x); //吉
console.log(x.length);
console.log(x.codePointAt(0)); //134071
console.log(x.codePointAt(0).toString(16)); //20bb7
console.log(x.codePointAt(1)); //57271

codePointAt(0)返回的是十进制码点；codePointAt(1)则返回的结果与charCodeAt方法返回的结果相同

3 String.fromCodePoint()

ES5提供String.fromCharCode方法，用于从码点返回对应字符，但是这个方法不能识别32位的UTF-16字符（Unicode编号大于0xFFFF）。

ES6提供了String.fromCodePoint方法，可以识别0xFFFF的字符，弥补了String.fromCharCode方法的不足。在作用上，正好与codePointAt方法相反。

console.log(String.fromCharCode("0x20bb7")); //ஷ
console.log(String.fromCodePoint("0x20bb7")); //吉

4 字符串的遍历器接口

ES6为字符串添加了遍历器接口，使得字符串可以被for...of循环遍历。

这个遍历器最大的优点是可以识别大于0xFFFF的码点

var text = String.fromCodePoint("0x20bb7"); //吉
for (let i = 0; i < text.length; i++) {
    console.log(text[i]);
    //�
    //�
}
for (let codePoint of text) {
    console.log(codePoint); //?
}

5 at()

ES7为字符串实例提供了at方法，可以识别Unicode编号大于0xFFFF的字符。

6 normalize()

ES6提供字符串实例的normalize()方法，用来将字符的不同表示方法统一为同样的形式，这称为Unicode正规化。

"u01D1".normalize() === "u004Fu030C".normalize()
// true

不过，normalize方法目前不能识别三个或三个以上字符的合成。

7 includes(),startsWith(),endsWith()

传统上，JavaScript只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6又提供了三种新方法。

includes()：返回布尔值，表示是否找到了参数字符串。

startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。

endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。

var str = "string";
console.log(str.includes("r")); //True
console.log(str.startsWith("str")); //True
console.log(str.endsWith("g")); //True

另外，他们都支持第二个参数用来表示开始搜索的位置，但endsWith针对的则是前n个字符

8 repeat()

repeat方法返回一个新字符串，表示将原字符串重复n次。

var str = "string";
console.log(str.repeat(2)); //stringstring

9 padStart(),padEnd()

padStart用于头部补全，padEnd用于尾部补全。

两个参数：1个是最小字符串长度；另一个是补全的字符串

10 模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

var name = "Oliver"; //变量
var info = `hello world
 welcome you`; //多行字符串
console.log(`hello ${name}`,info); //嵌套变量，输出多行字符串

变量应该写在${}大括号里面，并且可以放入任意的JS表达式；

11 标签模板

下面的例子实际上是函数参数如下的调用：

tag(["Hello ", "; Infomation: ", ""],Oliver,welcome to use the system.);

tag函数写法如下：

let user = {
    name: "Oliver",
    info: "welcome to use the system."
};
tag`Hello ${user.name}; Infomation: ${user.info}`;
function tag(s, v1, v2) {
    console.log(s); //["Hello ", "; Infomation: ", ""]
    console.log(v1); //Oliver
    console.log(v2); //welcome to use the system.
}

12 String.raw()

String.raw方法，往往用来充当模板字符串的处理函数，返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，对应于替换变量后的模板字符串。

String.raw`Hi
${2+3}!`;
// "Hi
5!"

String.raw`Hiu000A!`;
// "Hiu000A!"

String.raw方法也可以作为正常的函数使用。这时，它的第一个参数，应该是一个具有raw属性的对象，且raw属性的值应该是一个数组。

String.raw({ raw: "test" }, 0, 1, 2);
// "t0e1s2t"

// 等同于
String.raw({ raw: ["t","e","s","t"] }, 0, 1, 2);

云服务器 GPU云服务器新特性新特性整理新特性总结 PHP新特性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79056.html

【前端】ES6入门基础知识

摘要：关于的入门了解新增模板字符串为提供了简单的字符串插值功能箭头函数操作符左边为输入的参数，而右边则是进行的操作以及返回的值。将对象纳入规范，提供了原生的对象。增加了和命令，用来声明变量。关于ES6的入门了解新增模板字符串（为JavaScript提供了简单的字符串插值功能）、箭头函数（操作符左边为输入的参数，而右边则是进行的操作以及返回的值Inputs=>outputs。）、for-o...

philadelphia 2019-08-21 17:21 评论0 收藏0
ECMAScript6 新特性——“let和const命令”

摘要：基本用法所声明的变量，只在命令所在的代码块内有效。在循环中适合使用不存在变量提升不像那样会发生变量提升现象暂时性死区只要块级作用域内存在命令，它所声明的变量就绑定这个区域，不再受外部的影响。块级作用域实际上为新增了块级作用域。 1 let 基本用法所声明的变量，只在let命令所在的代码块内有效。 { let b = 100; console.log(b); //100...

PascalXie 2019-08-19 17:59 评论0 收藏0
ECMAScript6 新特性——“正则的扩展”

摘要：第二个参数指定修饰符，如果存在则使用指定的修饰符。属性表示是否设置了修饰符属性的属性返回正则表达式的正文的属性返回正则表达式的修饰符字符串必须转义，才能作为正则模式。 1 RegExp构造函数 ES6 允许RegExp构造函数接受正则表达式作为参数。第二个参数指定修饰符，如果存在则使用指定的修饰符。 var regexp = new RegExp(/xyz/i, ig); consol...

Shisui 2019-08-19 18:00 评论0 收藏0
ECMAScript6 新特性——“数值的扩展”

摘要：二进制和八进制表示法提供了二进制和八进制数值的新的写法，分别用前缀或和或表示。用来检查是否为有穷以及是否为这两个新方法只对数值有效，非数值一律返回。引入了和这两个常量，用来表示这个范围的上下限。因为有精度限制，超过的次方的值无法精确表示。 1 二进制和八进制表示法 ES6提供了二进制和八进制数值的新的写法，分别用前缀0b（或0B）和0o（或0O）表示。 console.log(0b10...

Dean 2019-08-19 18:02 评论0 收藏0
ECMAScript6 新特性——“变量的解构赋值”

摘要：数组的解构赋值允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。如果变量名与属性名不一致，必须写成下面这样。 1 数组的解构赋值 ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。基本用法 { var [a,[b,c],d,,...f] = [1,[2,3],4,5,6,7]; console...

Eric 2019-08-19 17:59 评论0 收藏0