關於ES6字符串的擴展詳解

Posted on by

一、字符串的擴展

字符的 Unicode 表示法

ES6 加強瞭對 Unicode 的支持，允許采用\uxxxx形式表示一個字符，其中xxxx表示字符的 Unicode 碼點。

"\u0061"
// "a"

字符串的遍歷器接口

ES6 為字符串添加瞭遍歷器接口（詳見《Iterator》一章），使得字符串可以被for…of循環遍歷。

for (let codePoint of 'foo') {
  console.log(codePoint)
}
// "f"
// "o"
// "o"

模板字符串

傳統的 JavaScript 語言，輸出模板通常是這樣寫的（下面使用瞭 jQuery 的方法）。

$('#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!
`);

二、字符串的新增方法

includes(), startsWith(), endsWith()

傳統上，JavaScript 隻有indexOf方法，可以用來確定一個字符串是否包含在另一個字符串中。ES6 又提供瞭三種新方法。

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

let s = 'Hello world!';

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

這三個方法都支持第二個參數，表示開始搜索的位置。

let s = 'Hello world!';

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

實例方法：repeat()

repeat方法返回一個新字符串，表示將原字符串重復n次。

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

實例方法：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'

實例方法：trimStart()，trimEnd()

ES2019 對字符串實例新增瞭trimStart()和trimEnd()這兩個方法。它們的行為與trim()一致，trimStart()消除字符串頭部的空格，trimEnd()消除尾部的空格。它們返回的都是新字符串，不會修改原始字符串。

const s = '  abc  ';

s.trim() // "abc"
s.trimStart() // "abc  "
s.trimEnd() // "  abc"

總結

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

推薦閱讀：