阮一峰ES6教程讀書筆記(二)字符串及新增方法

一、字符串的擴(kuò)展

1. 字符串的Unicode表示法

ES6 加強(qiáng)了對(duì) Unicode 的支持,允許采用\uxxxx形式表示一個(gè)字符,其中xxxx表示字符的 Unicode 碼點(diǎn)。寫法有很多種,我個(gè)人認(rèn)為將碼點(diǎn)寫在大括號(hào)內(nèi)最保險(xiǎn):

"\u{20BB7}"
// "??"

2. 為字符串增加遍歷接口

在之前我們我們可以通過for遍歷數(shù)組以及對(duì)象,但是現(xiàn)在for也可以遍歷字符串了,雖然我之前在Python中一直這么干,ES6現(xiàn)在支持for of遍歷字符串。例如:

a = '123'
for (let i of a) {
    console.log(i)
}
// 1
// 2
// 3

當(dāng)然如果我們堅(jiān)持使用for in也行,但是會(huì)麻煩些:

a = '123'
for (let i in a) {
    console.log(a[i])
}
// 1
// 2
// 3

3. 對(duì)JSON.stringify()的改造

現(xiàn)在如果JSON.stringify()遇到不能轉(zhuǎn)碼的碼點(diǎn)就會(huì)將之轉(zhuǎn)為字符串,留給應(yīng)用自己去做下一步處理

JSON.stringify('\u{D834}') // ""\\uD834""
JSON.stringify('\uDF06\uD834') // ""\\udf06\\ud834""

4. 模板字符串

ES5中我們通常使用+來進(jìn)行字符串拼接,但是在ES6我們有了更好的方法:

name = 'bing'
// ES5寫法
console.log('hello world' + ' ' + name) // hello world bing
// ES6寫法
console.log(`hello world ${name}`) // hello world bing

${ }中可以寫JavaScript表達(dá)式,所以也能在里面調(diào)用函數(shù)

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

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

如果模板中是一個(gè)字符串,那么就輸出一個(gè)字符串,并且字符串中換行,空格等字符會(huì)被保留。

5. 標(biāo)簽?zāi)0?/h2>

模板字符串可以緊跟在一個(gè)函數(shù)后面,它可以被解析為函數(shù)的參數(shù),比如:

let a = 5;
let b = 10;

tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);

二、字符串的新增方法

1.靜態(tài)方法

1.1 String.fromCodePoint()

String.fromCodePoint()可以識(shí)別碼點(diǎn)大于0xFFFFUnicode編碼,如果String.fromCodePoint方法有多個(gè)參數(shù),則它們會(huì)被合并成一個(gè)字符串返回。

String.fromCodePoint(0x20BB7)
// "??"
String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y'
// true

1.2 String.raw()

String.raw()方法可以作為處理模板字符串的基本方法,它會(huì)將所有變量替換,而且對(duì)斜杠進(jìn)行轉(zhuǎn)義,方便下一步作為字符串來使用。

String.raw`Hi\\n`
// 返回 "Hi\\\\n"

String.raw`Hi\\n` === "Hi\\\\n" // true

2. 實(shí)例方法

2.1 includes(), startsWith(), endsWith()

  • includes():返回布爾值,表示是否找到了參數(shù)字符串。
  • startsWith():返回布爾值,表示參數(shù)字符串是否在原字符串的頭部。
  • endsWith():返回布爾值,表示參數(shù)字符串是否在原字符串的尾部。
    上述方法都可以接受第二個(gè)參數(shù),表示開始搜索的位置。

2.2 repeat()

將源字符串重復(fù)n次

'x'.repeat(3) // 'xxx'

2.3 padStart(), padEnd()

ES2017 引入了字符串補(bǔ)全長(zhǎng)度的功能。如果某個(gè)字符串不夠指定長(zhǎng)度,會(huì)在頭部或尾部補(bǔ)全。padStart()用于頭部補(bǔ)全,padEnd()用于尾部補(bǔ)全。

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

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

上面代碼中,padStart()padEnd()一共接受兩個(gè)參數(shù),第一個(gè)參數(shù)是字符串補(bǔ)全生效的最大長(zhǎng)度,第二個(gè)參數(shù)是用來補(bǔ)全的字符串。

2.4 trimStart, trimEnd()

他們的作用與trim()一致,不過是一個(gè)是去掉頭部空格,一個(gè)是去掉尾部空格。

參考鏈接

作者:阮一峰
鏈接:http://es6.ruanyifeng.com/#docs/destructuring

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容