字符串的拓展
字符的Unicode表示法
ES5中，Unicode必须是\uxxxx形式的，少与4位不行，多于四位必须拆成两个4位的来表示。在ES6中，将一个码点值放在大括号中可以自动解析。与双字节表示等价。
console.log("\uD842\uDFB7");// "𠮷"
console.log("\u20BB7");//乱码
console.log("\u{20BB7}");//正常解析
console.log("\u41");//报错
console.log("\u{41}");//A
console.log('\u{1F680}' === '\uD83D\uDE80');//true
codePointAt()
在JS内部，字符以UTF-16的格式储存，每个字符固定为两个字节，对于那些需要4个字节来储存的字符，JS认为他们是两个字符。此时charAt方法和charCodeAt方法都无法完整获取这样的字符的码点值。
codePointAt可以
var s = '𠮷b';
console.log(s.codePointAt(0).toString(16)); // 20bb7
console.log(s.codePointAt(2).toString(16)); // 62
可以看到，这个方法正确的获取了码点，双字节和四字节的都可以。
不过注意到b应该是第2个字而我们传进了2。因为这个方法并不能判断这个字符前面的所有字符是双字节还是四字节的，所以只能按照双字节的下标来。
这个问题是可以解决的。使用for...of循环，它可以正确识别4字节字符。
var s = '𠮷a';
for (let ch of s) {
console.log(ch.codePointAt(0).toString(16));
}
String.fromCodePoint()
String.fromCharCode的支持四字节版
String.fromCodePoint(0x20BB7)
字符串遍历器接口
刚才已经提到了，使用for...of可以正确识别4字节字符为一个字符。
at()
这个是charAt的四字节版，目前貌似大多数都没实现。
'𠮷'.at(0) // "𠮷"
normalize()
标准化Unicode
比如带音标的字母，可以2字节表示也可以4字节表示，这个方法标准化它
'\u01D1'.normalize() === '\u004F\u030C'.normalize()
includes(), startsWith(), endsWith()
- includes()：返回布尔值，表示是否找到了参数字符串。
- startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。
- endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。
var s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false
repeat
'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""
padStart()，padEnd()
ES7中推出了字符补全长度的功能，如果某个字符串不够指定长度，就会在头部或尾部补全。
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
位数超了会截掉用来补全的字符串
'abc'.padStart(10, '0123456789')// '0123456abc'
用于补全指定位数和提示字符串格式很方便
'123456'.padStart(10, '0') // "0000123456"
'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"
模板字符串
var x = 1;
var y = 2;
`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"
`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"
var obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// 3
function fn() {
return "Hello World";
}
`foo ${fn()} bar`
// foo Hello World bar
实例：模板编译
通过字符串模板生正式模板的实例
var template = `
<ul>
<% for(var i=0; i < data.supplies.length; i++) { %>
<li><%= data.supplies[i] %></li>
<% } %>
</ul>
`;
function compile(template){
var evalExpr = /<%=(.+?)%>/g;
var expr = /<%([\s\S]+?)%>/g;
template = template
.replace(evalExpr, '`); \n echo( $1 ); \n echo(`')
.replace(expr, '`); \n $1 \n echo(`');
template = 'echo(`' + template + '`);';
var script =
`(function parse(data){
var output = "";
function echo(html){
output += html;
}
${ template }
return output;
})`;
return script;
}
var parse = eval(compile(template));
console.log(parse({ supplies: [ "broom", "mop", "cleaner" ] }));
这里就是使用正则表达式将template模板转换成了类似如下代码并以字符串形式返回，然后使用eval方法把它变成可执行的。
echo('<ul>');
for(var i=0; i < data.supplies.length; i++) {
echo('<li>');
echo(data.supplies[i]);
echo('</li>');
};
echo('</ul>');
标签模板
这是函数调用的一种特殊形式，标签指的就是函数，紧跟在后的模板字符串就是它的参数。第一个参数是被插入值分割成数组的字符串，后面就依次是插入值了。
var a = 5;
var b = 10;
function tag(s, v1, v2) {
console.log(s[0]);
console.log(s[1]);
console.log(s[2]);
console.log(v1);
console.log(v2);
return "OK";
}
tag`Hello ${ a + b } world ${ a * b}`;
//相当于tag(['Hello ', ' world ', ''], 15, 50)
这个可以用来过滤HTML字符串，以防用户输入恶意内容。
var message =
SaferHTML`<p>${sender} has sent you a message.</p>`;
function SaferHTML(templateData) {
var s = templateData[0];
for (var i = 1; i < arguments.length; i++) {
var 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;
}
进行多国语言转换也很方便~
i18n`Welcome to ${siteName}, you are visitor number ${visitorNumber}!`
// "欢迎访问xxx，您是第xxxx位访问者！"
String.raw
这个方法充当模板字符串的处理函数，返回一个斜杠都被转义，变量被替换的字符串。
String.raw`Hi\n${2+3}!`;
// "Hi\\n5!"
String.raw`Hi\u000A!`;
// 'Hi\\u000A!'
数值类型的拓展
二进制和八进制表示法
必须使用0b（或0B）和0o（或0O）表示
转换为十进制
Number('0b111') // 7
Number('0o10') // 8
Number.isFinite(), Number.isNaN()
它们与传统的全局方法isFinite()和isNaN()的区别在于，传统方法先调用Number()将非数值的值转为数值，再进行判断，而这两个新方法只对数值有效，非数值一律返回false。
Number.isFinite(15); // true
Number.isFinite(0.8); // true
Number.isFinite(NaN); // false
Number.isFinite(Infinity); // false
Number.isNaN(NaN) // true
Number.isNaN(15) // false
Number.isNaN('15') // false
Number.parseInt(), Number.parseFloat()
就是将全局方法移到了number对象上，这样更合理。
Number.isInteger()
用来判断一个数是否为整数
Number.isInteger(25) // true
Number.isInteger(25.0) // true
Number.isInteger(25.1) // false
Number.EPSILON
新常量，非常小，因为JS浮点预算存在误差，如果这个误差能够小于这个常量，就可以认为得到了正确的结果。
安全整数和Number.isSafeInteger()
JS中能够准确表示的整数在-253到253之间，超过这个范围就不行啦。
Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER值用来表示两个上下限。
Number.isSafeInteger用来检测一个整数在不在这个范围中
Number.MAX_SAFE_INTEGER === Math.pow(2, 53) - 1// true
Number.MAX_SAFE_INTEGER === 9007199254740991// true
Number.isSafeInteger('a') // false
Number.isSafeInteger(null) // false
Number.isSafeInteger(NaN) // false
Number.isSafeInteger(Infinity) // false
Number.isSafeInteger(-Infinity) // false
Number.isSafeInteger(3) // true
Number.isSafeInteger(1.2) // false
Number.isSafeInteger(9007199254740990) // true
Number.isSafeInteger(9007199254740992) // false
指数运算
2 ** 2 // 4
a **= 2;
// 等同于 a = a * a;
Math对象的拓展
Math.trunc()
用于除去一个数的小数部分
Math.trunc(4.1) // 4
Math.trunc(4.9) // 4
Math.trunc(-4.1) // -4
Math.trunc('123.456')
// 123
Math.trunc(NaN); // NaN
Math.trunc('foo'); // NaN
Math.trunc(); // NaN
Math.sign()
用来判断一个数到底是正数负数还是0
Math.sign(-5) // -1
Math.sign(5) // +1
Math.sign(0) // +0
Math.sign(-0) // -0
Math.sign(NaN) // NaN
Math.sign('foo'); // NaN
Math.sign(); // NaN
Math.cbrt()
Math.clz32()
Math.imul()
Math.fround()
Math.hypot()
Math.expm1()
Math.log1p()
Math.log10()
Math.log2()
Math.sinh(x)
Math.cosh(x)
Math.tanh(x)
Math.asinh(x)
Math.acosh(x)
Math.atanh(x)
数组的拓展
Array.from()
这个方法用来将两类对象转换为真正的数组，类似数组的对象，可遍历的对象（有Iterator接口的）。
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']
let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']
实际应用中，常见的就是NodeList集合和函数内部的arguments。
扩展运算符背后调用的是遍历器接口（Symbol.iterator），如果一个对象没有部署这个接口，就无法转换。Array.from方法则是还支持类似数组的对象。所谓类似数组的对象，本质特征只有一点，即必须有length属性。因此，任何有length属性的对象，都可以通过Array.from方法转为数组，而此时扩展运算符就无法转换。
Array.from({ length: 3 });
// [ undefined, undefined, undefinded ]
Array.from还接收第二个参数，用来对每一个元素进行处理，就像map方法。
Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);
Array.from([1, 2, 3], (x) => x * x)
Array.from()的另一个应用是，将字符串转为数组，然后返回字符串的长度。因为它能正确处理各种Unicode字符，可以避免JavaScript将大于\uFFFF的Unicode字符，算作两个字符的bug。
function countSymbols(string) {
return Array.from(string).length;
}
Array.of()
这个方法的存在是为了弥补Array构造函数的不足。Array构造函数在参数不同的时候会有不同的表现
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
Array.of()的行为超级统一
Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]
数组实例的copyWithin()
这个函数会把指定位置的成员复制到其他位置，目标位置的成员被覆盖。
接收3个参数：
- target（必需）：从该位置开始替换数据。
- start（可选）：从该位置开始读取数据，默认为0。如果为负值，表示倒数。
- end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。
[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]
// 将3号位复制到0号位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]
find()和findIndex()
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2
fill()
用给定的值填充数组，多传两个参数还可以规定填充的起始和结束位置。
['a', 'b', 'c'].fill(7)// [7, 7, 7]
new Array(3).fill(7)// [7, 7, 7]
['a', 'b', 'c'].fill(7, 1, 2)// ['a', 7, 'c']
entries()，keys()和values()
这三个方法用于遍历数组，他们都返回一个遍历器对象，可以用for...of循环进行遍历
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
includes()
数组是否包含所给元素，可选的传入起始位置：
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, NaN].includes(NaN); // true
[1, 2, 3].includes(3, 3); // false
这个方法比indexof要好，可以正确判断NaN。使用起来也更直观。
[NaN].indexOf(NaN)// -1
[NaN].includes(NaN)// true
数组的空位
ES5中各个数组方法对空位的处理非常不统一，有的跳过，有的视为undefined。
在ES6新的这些方法中，统一处理为undefined。
但是考虑到ES5中很不统一，尽量避免出现空位。
