字符串的扩展
字符串的遍历器接口for...of循环
for (const iterator of 'object') {
console.log(iterator);
}
// "o" "b" "j" "e" "c" "t"
模板字符串
字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
let x = 1, y = 2;
console.log(`${x} + ${y} = ${x+y}`) //1 + 2 = 3
let obj = {x:1, y:2};
console.log(`${obj.x + obj.y}`) // 3
标签模板
模板字符串可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能（tagged template）。
但是，如果模板字符里面有变量，就不是简单的调用了，而是会将模板字符串先处理成多个参数，再调用函数。
let a = 5;
let b = 10;
tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);
tag函数：function tag(message) {
console.log(message) //['Hello ', ' world ', ''];
arguments //[15, 50]
}
“标签模板”的一个重要应用，就是过滤 HTML 字符串，防止用户输入恶意内容。
let message = SaferHTML`<p>${sender} has sent you a message.</p>`;
function SaferHTML(templateData) {
//templateData=> ["<p>", " has sent you a message.</p>"]
//arguments=> ${sender}里面sender的值
let s = templateData[0];
for (let i = 1; i < arguments.length; i++) {
let arg = String(arguments[I]);
// Escape special characters in the substitution.
s += arg.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
// Don't escape special characters in the template.
s += templateData[I];
}
return s;
}
let sender = '<script>alert("abc")</script>'; // 恶意代码
let message = SaferHTML`<p>${sender} has sent you a message.</p>`;
message
// <p><script>alert("abc")</script> has sent you a message.</p>
判断一个字符串是否包含在另一个字符串中?
传统上，JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中(如果包含，返回字符index，否则返回-1)。ES6 又提供了三种新方法。
* includes()：返回布尔值，表示是否找到了参数字符串。
* startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
* endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
这三个方法都支持第二个参数，表示开始搜索的位置。
let s = 'Hello world!';
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false
上面代码表示，使用第二个参数n时，endsWith的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。
实例方法：repeat()
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""
实例方法：trimStart()，trimEnd()
ES2019 对字符串实例新增了trimStart()和trimEnd()这两个方法。它们的行为与trim()一致，trimStart()消除字符串头部的空格，trimEnd()消除尾部的空格。它们返回的都是新字符串，不会修改原始字符串。
const s = ' abc ';
s.trim() // "abc"
s.trimStart() // "abc "
s.trimEnd() // " abc"
正则的扩展
u修饰符
ES6 对正则表达式添加了u修饰符，含义为“Unicode 模式”，用来正确处理大于\uFFFF的 Unicode 字符。
点字符（.)
点字符（.）匹配除回车（\r）、换行(\n) 、行分隔符（\u2028）和段分隔符（\u2029）以外的所有字符。注意，对于码点大于0xFFFF字符，点字符不能正确匹配，会认为这是两个字符。
/c.t/
上面代码中，c.t匹配c和t之间包含任意一个字符的情况，只要这三个字符在同一行，比如cat、c2t、c-t等等，但是不匹配coot。
var s = '𠮷';
/^.$/.test(s) // false
/^.$/u.test(s) // true
上面代码表示，添加u修饰符，正则表达式就会匹配码点大于0xFFFF字符。
y 修饰符---“粘连”（sticky）修饰符
y修饰符的作用与g修饰符类似，也是全局匹配，后一次匹配都从上一次匹配成功的下一个位置开始。不同之处在于，g修饰符只要剩余位置中存在匹配就可，而y修饰符确保匹配必须从剩余的第一个位置开始，这也就是“粘连”的涵义。
var s = 'aaa_aa_a';
var r1 = /a+/g;
var r2 = /a+/y;
r1.exec(s) // ["aaa"]
r2.exec(s) // ["aaa"]
r1.exec(s) // ["aa"]
r2.exec(s) // null
上面代码有两个正则表达式，一个使用g修饰符，另一个使用y修饰符。这两个正则表达式各执行了两次，第一次执行的时候，两者行为相同，剩余字符串都是_aa_a。由于g修饰没有位置要求，所以第二次执行会返回结果，而y修饰符要求匹配必须从头部开始，所以返回null。
实际上，y修饰符号隐含了头部匹配的标志^。
/b/y.exec('aba')
// null
单单一个y修饰符，只能返回第一个匹配，必须与g修饰符联用，才能返回所有匹配。
const REGEX = /a/gy;
'aaxa'.replace(REGEX, '-') // '--xa'
const REGEX = /a/y;
'aaxa'.replace(REGEX, '-') // '-axa'
'a1a2a3'.match(/a\d/y) // ["a1"]
'a1a2a3'.match(/a\d/gy) // ["a1", "a2", "a3"]
RegExp.prototype.sticky 属性表示是否设置了y修饰符。
s 修饰符：dotAll 模式
点（.）是一个特殊字符，代表任意的单个字符.但是点（.）有所限制--只能识别回车（\r）、换行(\n) 、行分隔符（\u2028）和段分隔符（\u2029）以外的所有字符，很多时候我们希望匹配的是任意单个字符.
/foo.bar/.test('foo\nbar')
// false
/foo[^]bar/.test('foo\nbar')
// true
[^]，表示匹配一切字符。这种解决方案毕竟不太符合直觉
于是ES2018 引入s修饰符，使得.可以匹配任意单个字符。
/foo.bar/s.test('foo\nbar') // true
这被称为dotAll模式，即点（dot）代表一切字符。所以，正则表达式还引入了一个dotAll属性，返回一个布尔值，表示该正则表达式是否处在dotAll模式。
const re = /foo.bar/s;
re.test('foo\nbar') // true
re.dotAll // true
re.flags // 's'
具名组匹配
正则表达式使用圆括号进行组匹配。
const RE_DATE = /(\d{4})-(\d{2})-(\d{2})/;
const matchObj = RE_DATE.exec('1999-12-31');
const year = matchObj[1]; // 1999
const month = matchObj[2]; // 12
const day = matchObj[3]; // 31
组匹配的一个问题是，每一组的匹配含义不容易看出来，而且只能用数字序号（比如matchObj[1]）引用，要是组的顺序变了，引用的时候就必须修改序号。
ES2018 引入了具名组匹配（Named Capture Groups），允许为每一个组匹配指定一个名字，既便于阅读代码，又便于引用
const RE_DATE = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const matchObj = RE_DATE.exec('1999-12-31');
const year = matchObj.groups.year; // 1999
const month = matchObj.groups.month; // 12
const day = matchObj.groups.day; // 31
如果要在正则表达式内部引用某个“具名组匹配”，可以使用\k<组名>的写法。
const RE_TWICE = /^(?<word>[a-z]+)!\k<word>$/;
RE_TWICE.test('abc!abc') // true
RE_TWICE.test('abc!ab') // false
数字引用（\1）依然有效。
const RE_TWICE = /^(?<word>[a-z]+)!\1$/;
RE_TWICE.test('abc!abc') // true
RE_TWICE.test('abc!ab') // false
String.prototype.match()方法与正则对象的exec方法
var regex = /t(e)(st(\d?))/g;
var string = 'test1test2test3';
var matches = regex.exec(string);
var matches2 = string.match(regex);
matches //["test1", "e", "st1", "1"]
exec()方法如果发现匹配，就返回一个数组。
因此要获取全部匹配结果，要用一个循环：
var matches = [];
var match;
while (match = regex.exec(string)) {
matches.push(match);
}
matches
// [
// ["test1", "e", "st1", "1", index: 0, input: "test1test2test3"],
// ["test2", "e", "st2", "2", index: 5, input: "test1test2test3"],
// ["test3", "e", "st3", "3", index: 10, input: "test1test2test3"]
// ]
matches2 // ["test1", "test2", "test3"]
如果正则表达式带有g修饰符，则String.prototype.match()方法与正则对象的exec方法行为不同，会一次性返回所有匹配成功的结果。
String.prototype.matchAll
es6增加了String.prototype.matchAll方法，可以一次性取出所有匹配。不过，它返回的是一个遍历器（Iterator），而不是数组。
const string = 'test1test2test3';
// g 修饰符加不加都可以
const regex = /t(e)(st(\d?))/g;
for (const match of string.matchAll(regex)) {
console.log(match);
}
// ["test1", "e", "st1", "1", index: 0, input: "test1test2test3"]
// ["test2", "e", "st2", "2", index: 5, input: "test1test2test3"]
// ["test3", "e", "st3", "3", index: 10, input: "test1test2test3"]
若要把遍历器（Iterator）改为数组，可以用如下两个方法：
[...match]
Array.from(match)
数值的扩展
Number.parseInt(), Number.parseFloat()
ES6 将全局方法parseInt()和parseFloat()，移植到Number对象上面，行为完全保持不变。这样做的目的，是逐步减少全局性方法，使得语言逐步模块化。
Number.isInteger()
Number.isInteger()用来判断一个数值是否为整数。
Number.isInteger(25) // true
Number.isInteger(25.1) // false
Number.isInteger('15') // false
Number.isInteger(true) // false
Math 对象的扩展
ES6 在 Math 对象上新增了 17 个与数学相关的方法。所有这些方法都是静态方法，只能在 Math 对象上调用。
1、Math.trunc()
Math.trunc方法用于去除一个数的小数部分，返回整数部分。
Math.trunc(4.1) // 4
Math.trunc(-4.9) // -4
Math.trunc(-0.1234) // -0
对于非数值，Math.trunc内部使用Number方法将其先转为数值。
Math.trunc('123.456') // 123
Math.trunc(true) //1
对于空值和无法截取整数的值，返回NaN。
Math.trunc(NaN); // NaN
Math.trunc('foo'); // NaN
Math.trunc(); // NaN
Math.trunc(undefined) // NaN
2、Math.sign()
Math.sign方法用来判断一个数到底是正数、负数、还是零。对于非数值，会先将其转换为数值。
它会返回五种值。
- 参数为正数，返回+1；
- 参数为负数，返回-1；
- 参数为 0，返回0；
- 参数为-0，返回-0;
- 其他值，返回NaN。
指数运算符
ES2016 新增了一个指数运算符（**）。
2 ** 2 // 4
2 ** 3 // 8
旧的指数运算方法：Math.pow(2, 3) //8
网友评论