ES6學習（三）

寫在前面

以前也沒有認真學習過js關於字符的表達方法，此次正好學習補補。

http://es6.ruanyifeng.com/#docs/string

字符的 Unicode 表示法

JavaScript 容許採用\uxxxx形式表示一個字符，其中xxxx表示字符的 Unicode 碼點。

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

"\uD842\uDFB7"
// "𠮷"

"\u20BB7"
// " 7"

上面代碼表示，若是直接在\u後面跟上超過0xFFFF的數值（好比\u20BB7），JavaScript會理解成\u20BB+7。因爲\u20BB是一個不可打印字符，因此只會顯示一個空格，後面跟着一個7。

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

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

"\u{41}\u{42}\u{43}"
// "ABC"

let hello = 123;
hell\u{6F} // 123

'\u{1F680}' === '\uD83D\uDE80'
// true

 

大括號表示法與四字節的 UTF-16 編碼是等價的。

JavaScript 共有6種方法能夠表示一個字符。

'\z' === 'z'  // true
//這裏是8進制
'\172' === 'z' // true
//這裏也是16進制
'\x7A' === 'z' // true
'\u007A' === 'z' // true
'\u{7A}' === 'z' // true

codePointAt() 

var s = "𠮷";

s.length // 2
s.charAt(0) // ''
s.charAt(1) // ''
s.charCodeAt(0) // 55362
s.charCodeAt(1) // 57271

對於那些須要4個字節儲存的字符（Unicode碼點大於0xFFFF的字符），JavaScript會認爲它們是兩個字符。

漢字「𠮷」（注意，這個字不是「吉祥」的「吉」）的碼點是0x20BB7，UTF-16編碼爲0xD842 0xDFB7（十進制爲55362 57271），須要4個字節儲存。對於這種4個字節的字符，JavaScript不能正確處理，字符串長度會誤判爲2，並且charAt方法沒法讀取整個字符，charCodeAt方法只能分別返回前兩個字節和後兩個字節的值。

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

let s = '𠮷a';

//這裏0位置上實際就返回的是𠮷的字符的10進制
s.codePointAt(0) // 134071
//與charCodeAt一致，返回的是𠮷的後兩個字符10進制
s.codePointAt(1) // 57271
//'a'
s.codePointAt(2) // 97

s.codePointAt(0).toString(16) // "20bb7"
s.codePointAt(2).toString(16) // "61"

codePointAt方法的參數，仍然是不正確的。好比，上面代碼中，字符a在字符串s的正確位置序號應該是1，可是必須向codePointAt方法傳入2。解決這個問題的一個辦法是使用for...of循環

let s = '𠮷a';
for (let ch of s) {
  console.log(ch.codePointAt(0).toString(16));
}

codePointAt方法是測試一個字符由兩個字節仍是由四個字節組成的最簡單方法。

function is32Bit(c) {
  return c.codePointAt(0) > 0xFFFF;
}

is32Bit("𠮷") // true
is32Bit("a") // false

 String.fromCodePoint()

String.fromCharCode(0x20BB7)
// "ஷ"

String.fromCharCode不能識別大於0xFFFF的碼點，因此0x20BB7就發生了溢出，最高位2被捨棄了，最後返回碼點U+0BB7對應的字符，而不是碼點U+20BB7對應的字符。

ES6提供了String.fromCodePoint方法，能夠識別大於0xFFFF的字符，彌補了String.fromCharCode方法的不足。在做用上，正好與codePointAt方法相反。

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

上面代碼中，若是String.fromCodePoint方法有多個參數，則它們會被合併成一個字符串返回。

 字符串的遍歷器接口

使得字符串能夠被for...of循環遍歷。

這個遍歷器最大的優勢是能夠識別大於0xFFFF的碼點

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

at()

也是爲了識別大於0xFFFF的字符

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

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

 

normalize()

提供一種方法，不一樣表示方法統一爲一樣的形式，這稱爲 Unicode 正規化。

'\u01D1'.normalize() === '\u004F\u030C'.normalize()
// true
//Ǒ（\u01D1）
//另外一種是提供合成符號（combining character），
//即原字符與重音符號的合成，兩個字符合成一個字符，
//O（\u004F）+ˇ（\u030C） => Ǒ（\u004F\u030C）

includes(), startsWith(), endsWith() 

JavaScript只有indexOf方法，能夠用來肯定一個字符串是否包含在另外一個字符串中。ES6又提供了三種新方法。

• includes()：返回布爾值，表示是否找到了參數字符串。
• startsWith()：返回布爾值，表示參數字符串是否在原字符串的頭部。
• endsWith()：返回布爾值，表示參數字符串是否在原字符串的尾部。
• 都支持第二個參數，表示開始搜索的位置。

let s = 'Hello world!';

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

repeat()

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

參數規則

字符串轉數字

小數取整，負數報錯，負0點幾算0，NaN算0

padStart()，padEnd()

padStart()用於頭部補全，padEnd()用於尾部補全

padStart和padEnd一共接受兩個參數，

第一個參數用來指定字符串的最小長度，

第二個參數是用來補全的字符串。無參數的話則用空格補全

一樣，第一個參數會強轉爲數字，第二個參數會強轉爲字符串

若是字符串不用補全則保持不變

經常使用用法

padStart的常見用途是爲數值補全指定位數。下面代碼生成10位的數值字符串。

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

另外一個用途是提示字符串格式。

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

模板字符串

ps:以爲仍是傳統更加簡單粗暴，易瞭解

//傳統
$('#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}?`

當須要使用`時就須要轉義

let greeting = `\`Yo\` World!`;

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

嵌入變量，須要將變量名寫在${}之中

本質是模板字符串的大括號內部，就是執行JavaScript代碼

原先的是拼接字符串，而模板字符串則是執行代碼後拼接