ES6字符串的擴展實例

Posted on by

本節我們來學習 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

到此這篇關於ES6字符串的擴展實例的文章就介紹到這瞭,更多相關ES6字符串擴展內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：