ES6 字符串的擴展

字符的 Unicode 表示法

ES6 增強了對 Unicode 的支持，JavaScript 中能夠採用 \\uxxx 形式表示一個字符，其中 xxxx 表示字符的碼點。例如：

console.log("\u0075"); // u

可是這種表示法只限於碼點在 \\u0000~\\uFFFF 之間的字符。超出這個範圍的字符，必須用兩個雙字節的形式表示。

console.log("\uD842\uDFB7"); // ?

console.log("\u20BB8");  // 8

這表示，若是直接在 \\u 後面跟上超過 0xFFFF 的數值，例如 \\u20BB8，JavaScript 會理解成 \\u20BB+8。因爲 \\u20BB 是一個不可打印字符，因此只會顯示一個空格，後面跟着一個 8。

ES6 對這一點作出了改進，只要將碼點放入大括號，就能正確解讀該字符。

console.log("\u{20BB7}"); // ?

console.log("\u{41}\u{42}\u{43}");  // ABC

let hello = 123;
console.log(hell\u{6F}); // 123

console.log('\u{1F680}' === '\uD83D\uDE80');  // true

上面代碼中，最後一個例子代表，大括號表示法與四字節的 UTF-16 編碼是等價的。

有了這種表示法以後，JavaScript共有6種方法能夠表示一個字符。

'\z' === 'z'  // true
'\172' === 'z' // true
'\x7A' === 'z' // true
'\u007A' === 'z' // true
'\u{7A}' === 'z' // true

遍歷器接口

ES6 爲字符串添加了遍歷器接口，使得字符串能夠被 for...of 循環遍歷。

示例：

例如咱們遍歷字符串 xkd：

for (let i of 'xkd') {
    console.log(i)
}

輸出：

x
k
d

除了遍歷字符串，這個遍歷器最大的優勢是能夠識別大於 0xFFFF 的碼點，傳統的 for 循環沒法識別這樣的碼點。

示例：

let a = String.fromCodePoint(0x20BB7);

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


for (let i of a) {
  console.log(i);
}

上述代碼中，字符串 a 只有一個字符，可是 for 循環會認爲它包含兩個字符（都不可打印），而 for...of 循環會正確識別出這一個字符。

模板字符串的使用

咱們在 JavaScript 語言中，若是要輸出內容，一般能夠像下面這樣寫的：

var name = "俠課島";
var age = 10;
console.log("個人名字是"+ name + "，我今年" + age + "歲了。" );

// 輸出：個人名字是俠課島，我今年10歲了。

這種寫法須要使用大量的雙引號和加號來拼接才能獲得咱們須要的模板，很是不方便。

而在 ES6 中提供了模板字符串，只須要將想要輸出的內容用反引號標識，而後變量部分使用 ${} 括起來便可。

示例：

上面的例子能夠用模板字符串寫成下面這樣：

var name = "俠課島";
var age = 10;
console.log( `個人名字是${name} ，我今年${age}歲了。`);

// 輸出：個人名字是俠課島，我今年10歲了。

這樣寫很明顯語法語法簡潔了不少，不須要再使用大量的雙引號和加號來拼接字符串和變量。

模板字符串都是使用反引號表示的，若是咱們但願在模板字符串中使用反引號，則須要在前面使用反斜槓 \\ 轉義。

示例：

let content = `\`hello\` xkd!`;
console.log(content);  // 輸出：`hello` xkd!

若是使用模板字符串表示多行字符串，全部的空格和縮進都會被保留在輸出之中。

console.log( `你好\` 我叫作俠課島,
 今年3歲啦！`);

執行代碼後，會直接輸出以下所示內容：

你好` 我叫作俠課島,
 今年3歲啦！

在模板字符串中嵌入變量

若是咱們想要在模板字符串中嵌入變量，那麼變量須要寫在 ${} 之中才可以正常使用，不然會當作普通字符串輸出。

示例：

var name= "xkd";
console.log(`你好，${name}`);

// 輸出：你好，xkd

可是若是模板字符串中的變量沒有被聲明，將致使報錯喲。

let content = `Hello, ${name}`;
console.log(content);     // 輸出：ReferenceError: name is not defined

因爲模板字符串的大括號內部，就是執行 JavaScript 代碼，所以若是大括號內部是一個字符串，將會原樣輸出。

let content = `Hello, ${"xkd"}`;
console.log(content);    // 輸出：Hello, xkd

大括號 ${} 內部能夠放入任意的 JavaScript 表達式，能夠進行運算，以及引用對象屬性。

var a = 10;
var b = 20;
console.log(`a=${++a}， b=${a+b}`);

// 輸出：a=11， b=31

在模板字符串中調用函數

ES6 中模板字符串有一個更強大的功能，就是咱們能夠在模板字符串之中調用函數。

示例：

function show() {
  return "俠課島";
}

console.log(`你好，你叫什麼名字?
你好，我叫${show()}`);

執行代碼後，輸出內容以下所示：

你好，你叫什麼名字?
你好，我叫俠課島

若是大括號中的值不是字符串，將按照通常的規則轉爲字符串。好比，大括號中是一個對象，將默認調用對象的toString 方法。

判斷是否包含子字符串

JavaScript 想要判斷字符串是否包含子字符串，可使用 indexOf() 方法。可是在 ES6 中又新增了三種方法能夠用來判處案是否包含子字符串，以下所示：

• includes()：返回布爾值，表示是否找到了參數字符串。
• startsWith()：返回布爾值，表示參數字符串是否在原字符串的頭部。
• endsWith()：返回布爾值，表示參數字符串是否在原字符串的尾部。

示例：

這三個方法均可以接受兩個參數，第一個參數爲須要搜索的字符串，第二個參數爲可選的搜索起始位置索引：

let string = "hello, xkd";

console.log(string.includes("hello"));  // true
console.log(string.startsWith("x", 7)); // true
console.log(string.endsWith("abc"));    // false

注意上述方法的返回值都爲布爾值，因此若是須要知道子字符串的位置，仍是得用 indexOf() 和 lastIndexOf() 方法。

字符串重複

在 ES6 中新增了一個 repeat() 方法，用於返回新的字符串，表示將字符串重複指定次數返回。

示例：

console.log("a".repeat(5));  // 輸出：aaaaa

若是 repeat() 函數中的參數爲小數，則會向下取整：

console.log("a".repeat(3.1));  // 輸出：aaa
console.log("b".repeat(4.5));  // 輸出：bbbb
console.log("c".repeat(5.9));  // 輸出：ccccc

若是參數爲 0 到 -1 之間的小數，會進行取整運算，0 至 -1 之間的小數取整獲得 -0，等同於重複零次：

console.log("a".repeat(-0.1));  // 輸出：""
console.log("b".repeat(-0.9));  // 輸出：""

若是傳入的參數是字符串，則會先將字符串轉化爲數字：

console.log("a".repeat("five")); // 輸出: ""
console.log("b".repeat("3"));    // 輸出: bbb

字符串補全

ES6 中爲字符串補全提供了兩個新的方法，以下所示：

• padStart()：返回新的字符串，表示用參數字符串從頭部（左側）補全原字符串。
• padEnd()：返回新的字符串，表示用參數字符串從尾部（右側）補全原字符串。

這兩個方法接受兩個參數，第一個參數是指定生成的字符串的最小長度，第二個參數是用來補全的字符串。若是沒有指定第二個參數，默認用空格填充。

示例：

console.log("xkd".padStart(5, "o")); // 輸出：ooxkd 
console.log("a".padEnd(3, "xkd"));   // 輸出：axk
console.log("b".padStart(3));        // 輸出：  b

若是指定的長度小於或者等於原字符串的長度，則返回原字符串：

console.log("hello".padStart(3,"a"));  // hello
console.log("hello".padStart(7,"a"));  // aahello

若是原字符串加上補全字符串長度大於指定長度，則截去超出位數的補全字符串：

console.log("hello".padEnd(7,",xkd!"));    // hello,x
console.log("abcde".padEnd(10,"fghijk"));  // abcdefghij

還能夠用於補全位數：

console.log("1".padStart(10, "0"));  // 0000000001
console.log("2".padEnd(10, "0"));    // 2000000000