ES6字符串的擴展

1 字符的Unicode表示法
javascript允許採用\uxxxx形式表示一個字符。ES6對其作出一點改進，只要將碼點放入大括號，就能正確解讀該字符

"\u{20BB7}"           // ��
"\u{41}\u{42}\u{43}"  // "ABC"

2 codePointAt()
Javascript內部，字符以UTF-16的格式存儲，每個字符固定爲2個字節。對於那些需要4個字節存儲的字符（Unicode碼點大於0xFFFF的字符），Javascript會認爲是兩個字符。

ES6提供了codePointAt方法，能夠正確處理4個字節存儲的字符，返回一個字符的碼點

3 字符串的遍歷器接口
ES6爲字符串添加了遍歷器接口，使得字符串可以被for..of循環遍歷。

for (let codePoint of 'fook') {
    console.log(codePoint);
}   // f   o   o  k

這個遍歷器最大的優點是可以識別大於0xFFFF的碼點，傳統的for循環無法識別這樣的碼點。

let text = String.fromCodePoint(0x20BB7);

for (let i=0; i < text.length; i++) {
    console.log(text[i]);    // " "   " "
}

for(let i of text) {
    console.log(i);
}   // 循環出正確識別出這個字符

4 at()
ES5對字符串對象提供charAt方法，返回字符串給定位置的字符，該方法不能識別碼點大於0xFFFF的字符。

'abc'.charAt(0)     // "a"
'��'.charAt(0)      // "\uD842"

第二條語句，charAt方法期望返回的是用2個字節表示的字符，但漢字“��”佔用了4個字節，charAt(0)表示獲取這4個字節中的前2個字節，很顯然，這是無法正常顯示的。而at()方法，可以識別Unicode編號大於0xFFFF的字符。

'abc'.at(0) // "a"
'��'.at(0) // "��"

5 includes()，startsWith()，endsWith()
傳統上，Javascript只有indexOf方法，可以用來確定一個字符串是否包含在另一個字符串中。ES6提供了三種新方法。
– includes()：返回布爾值，表示是否找到了參數字符串。
– startsWith()：返回布爾值，表示參數字符串是否在原字符串的頭部。
– endsWith()：返回布爾值，表示參數字符串是否在原字符串的尾部。

let s = 'Hello world!';

s.startsWith('Hello')   // true
s.endsWith('!')         // true
s.includes('o')         // true

6 repeat()
repeat方法返回一個新字符串，表示將原字符串重複n次

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

7 padStart()，padEnd()
ES2017引入字符串補全長度的功能，padStart()用於頭部補全，padEnd()用於尾部補全。

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

padStart的常見用途是爲數值補全指定位數，

'1'.padStart(10, '0') // "0000000001"
'123456'.padStart(10, '0') // "0000123456"

// 提示字符串格式
'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

8 模板字符串
傳統的JavaScript語言，輸出模板如下:

$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);

ES6引入了模板字符串

$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

模板字符串是增強版的字符串，用反引號( ` )標識。

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入變量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

如果使用模板字符串表示多行字符串，所有的空格和縮進都會被保留在輸出中。

$('#list').html(`
    <ul>
        <li>first</li>
        <li>second</li>
    </ul>
`)

大括號內部可以放入任意的Javascript表達式，可以進行運算，以及應用對象屬性

let x = 1;
let y = 2;

`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

let obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"

模板字符串也可以調用函數

function fn() {
    return "Hello World";
}

`foo ${fn()} bar`   // foo Hello World bar

本博客內容摘抄自
阮一峯老師寫的ECMAScript6入門一書