字符串的拓展
字符的Unicode表示法
ES5中拓诸，Unicode必須是\uxxxx形式的，少與4位不行屈溉，多于四位必須拆成兩個4位的來表示贱迟。在ES6中姐扮，將一個碼點(diǎn)值放在大括號中可以自動解析。與雙字節(jié)表示等價衣吠。
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內(nèi)部茶敏，字符以UTF-16的格式儲存，每個字符固定為兩個字節(jié)缚俏，對于那些需要4個字節(jié)來儲存的字符惊搏，JS認(rèn)為他們是兩個字符。此時charAt方法和charCodeAt方法都無法完整獲取這樣的字符的碼點(diǎn)值忧换。
codePointAt可以
var s = '??b';
console.log(s.codePointAt(0).toString(16)); // 20bb7
console.log(s.codePointAt(2).toString(16)); // 62
可以看到恬惯，這個方法正確的獲取了碼點(diǎn)，雙字節(jié)和四字節(jié)的都可以亚茬。
不過注意到b應(yīng)該是第2個字而我們傳進(jìn)了2酪耳。因為這個方法并不能判斷這個字符前面的所有字符是雙字節(jié)還是四字節(jié)的，所以只能按照雙字節(jié)的下標(biāo)來刹缝。
這個問題是可以解決的碗暗。使用for...of循環(huán)，它可以正確識別4字節(jié)字符梢夯。
var s = '??a';
for (let ch of s) {
console.log(ch.codePointAt(0).toString(16));
}
String.fromCodePoint()
String.fromCharCode的支持四字節(jié)版
String.fromCodePoint(0x20BB7)
字符串遍歷器接口
剛才已經(jīng)提到了言疗，使用for...of可以正確識別4字節(jié)字符為一個字符。
at()
這個是charAt的四字節(jié)版厨疙，目前貌似大多數(shù)都沒實現(xiàn)。
'??'.at(0) // "??"
normalize()
標(biāo)準(zhǔn)化Unicode
比如帶音標(biāo)的字母疑务，可以2字節(jié)表示也可以4字節(jié)表示沾凄，這個方法標(biāo)準(zhǔn)化它
'\u01D1'.normalize() === '\u004F\u030C'.normalize()
includes(), startsWith(), endsWith()
- includes()：返回布爾值，表示是否找到了參數(shù)字符串知允。
- startsWith()：返回布爾值撒蟀，表示參數(shù)字符串是否在源字符串的頭部。
- endsWith()：返回布爾值温鸽，表示參數(shù)字符串是否在源字符串的尾部保屯。
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中推出了字符補(bǔ)全長度的功能，如果某個字符串不夠指定長度姑尺，就會在頭部或尾部補(bǔ)全竟终。
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
位數(shù)超了會截掉用來補(bǔ)全的字符串
'abc'.padStart(10, '0123456789')// '0123456abc'
用于補(bǔ)全指定位數(shù)和提示字符串格式很方便
'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" ] }));
這里就是使用正則表達(dá)式將template模板轉(zhuǎn)換成了類似如下代碼并以字符串形式返回，然后使用eval方法把它變成可執(zhí)行的切蟋。
echo('<ul>');
for(var i=0; i < data.supplies.length; i++) {
echo('<li>');
echo(data.supplies[i]);
echo('</li>');
};
echo('</ul>');
標(biāo)簽?zāi)０?/h2>
這是函數(shù)調(diào)用的一種特殊形式统捶，標(biāo)簽指的就是函數(shù)，緊跟在后的模板字符串就是它的參數(shù)柄粹。第一個參數(shù)是被插入值分割成數(shù)組的字符串喘鸟，后面就依次是插入值了。
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}`;
//相當(dāng)于tag(['Hello ', ' world ', ''], 15, 50)
這個可以用來過濾HTML字符串驻右，以防用戶輸入惡意內(nèi)容什黑。
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;
}
進(jìn)行多國語言轉(zhuǎn)換也很方便~
i18n`Welcome to ${siteName}, you are visitor number ${visitorNumber}!`
// "歡迎訪問xxx，您是第xxxx位訪問者堪夭！"
String.raw
這個方法充當(dāng)模板字符串的處理函數(shù)愕把，返回一個斜杠都被轉(zhuǎn)義，變量被替換的字符串茵瘾。
String.raw`Hi\n${2+3}!`;
// "Hi\\n5!"
String.raw`Hi\u000A!`;
// 'Hi\\u000A!'
數(shù)值類型的拓展
二進(jìn)制和八進(jìn)制表示法
必須使用0b（或0B）和0o（或0O）表示
轉(zhuǎn)換為十進(jìn)制
Number('0b111') // 7
Number('0o10') // 8
Number.isFinite(), Number.isNaN()
它們與傳統(tǒng)的全局方法isFinite()和isNaN()的區(qū)別在于礼华，傳統(tǒng)方法先調(diào)用Number()將非數(shù)值的值轉(zhuǎn)為數(shù)值，再進(jìn)行判斷拗秘，而這兩個新方法只對數(shù)值有效圣絮，非數(shù)值一律返回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()
用來判斷一個數(shù)是否為整數(shù)
Number.isInteger(25) // true
Number.isInteger(25.0) // true
Number.isInteger(25.1) // false
Number.EPSILON
新常量，非常小凡涩，因為JS浮點(diǎn)預(yù)算存在誤差棒搜，如果這個誤差能夠小于這個常量，就可以認(rèn)為得到了正確的結(jié)果活箕。
安全整數(shù)和Number.isSafeInteger()
JS中能夠準(zhǔn)確表示的整數(shù)在-253到253之間力麸，超過這個范圍就不行啦。
Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER值用來表示兩個上下限育韩。
Number.isSafeInteger用來檢測一個整數(shù)在不在這個范圍中
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
指數(shù)運(yùn)算
2 ** 2 // 4
a **= 2;
// 等同于 a = a * a;
Math對象的拓展
Math.trunc()
用于除去一個數(shù)的小數(shù)部分
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()
用來判斷一個數(shù)到底是正數(shù)負(fù)數(shù)還是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)
數(shù)組的拓展
Array.from()
這個方法用來將兩類對象轉(zhuǎn)換為真正的數(shù)組克蚂，類似數(shù)組的對象，可遍歷的對象（有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']
實際應(yīng)用中埃叭，常見的就是NodeList集合和函數(shù)內(nèi)部的arguments。
擴(kuò)展運(yùn)算符背后調(diào)用的是遍歷器接口（Symbol.iterator）悉罕，如果一個對象沒有部署這個接口赤屋，就無法轉(zhuǎn)換立镶。Array.from方法則是還支持類似數(shù)組的對象。所謂類似數(shù)組的對象类早，本質(zhì)特征只有一點(diǎn)媚媒，即必須有l(wèi)ength屬性。因此莺奔，任何有l(wèi)ength屬性的對象欣范，都可以通過Array.from方法轉(zhuǎn)為數(shù)組，而此時擴(kuò)展運(yùn)算符就無法轉(zhuǎn)換令哟。
Array.from({ length: 3 });
// [ undefined, undefined, undefinded ]
Array.from還接收第二個參數(shù)恼琼，用來對每一個元素進(jìn)行處理，就像map方法屏富。
Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);
Array.from([1, 2, 3], (x) => x * x)
Array.from()的另一個應(yīng)用是晴竞，將字符串轉(zhuǎn)為數(shù)組，然后返回字符串的長度狠半。因為它能正確處理各種Unicode字符噩死，可以避免JavaScript將大于\uFFFF的Unicode字符，算作兩個字符的bug神年。
function countSymbols(string) {
return Array.from(string).length;
}
Array.of()
這個方法的存在是為了彌補(bǔ)Array構(gòu)造函數(shù)的不足已维。Array構(gòu)造函數(shù)在參數(shù)不同的時候會有不同的表現(xiàn)
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
Array.of()的行為超級統(tǒng)一
Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]
數(shù)組實例的copyWithin()
這個函數(shù)會把指定位置的成員復(fù)制到其他位置，目標(biāo)位置的成員被覆蓋已日。
接收3個參數(shù)：
- target（必需）：從該位置開始替換數(shù)據(jù)垛耳。
- start（可選）：從該位置開始讀取數(shù)據(jù)，默認(rèn)為0飘千。如果為負(fù)值堂鲜，表示倒數(shù)。
- end（可選）：到該位置前停止讀取數(shù)據(jù)护奈，默認(rèn)等于數(shù)組長度缔莲。如果為負(fù)值，表示倒數(shù)霉旗。
[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]
// 將3號位復(fù)制到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()
用給定的值填充數(shù)組痴奏，多傳兩個參數(shù)還可以規(guī)定填充的起始和結(jié)束位置。
['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()
這三個方法用于遍歷數(shù)組读拆，他們都返回一個遍歷器對象，可以用for...of循環(huán)進(jìn)行遍歷
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()
數(shù)組是否包含所給元素简僧，可選的傳入起始位置：
[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
數(shù)組的空位
ES5中各個數(shù)組方法對空位的處理非常不統(tǒng)一棉姐，有的跳過，有的視為undefined啦逆。
在ES6新的這些方法中伞矩，統(tǒng)一處理為undefined。
但是考慮到ES5中很不統(tǒng)一夏志，盡量避免出現(xiàn)空位乃坤。
