1. 程式人生 > >ECMAScript 6 入門-字串的擴充套件

ECMAScript 6 入門-字串的擴充套件

codePointAt()

charAt() 方法可返回指定位置的字元。
用法:stringObject.charAt(index)
引數:index:必需。表示字串中某個位置的數字,即字元在字串中的下標。

let str="zhangxing";
console.log(str.charAt(1)); //h

charCodeAt() 方法可返回指定位置的字元的 Unicode 編碼。這個返回值是 0 - 65535 之間的整數。
方法 charCodeAt() 與 charAt() 方法執行的操作相似,只不過前者返回的是位於指定位置的字元的編碼,而後者返回的是字元子串。
用法:stringObject.charCodeAt(index)


引數:index:必需。表示字串中某個位置的數字,即字元在字串中的下標。
註釋:字串中第一個字元的下標是 0。如果 index 是負數,或大於等於字串的長度,則 charCodeAt() 返回 NaN。

let str="zhangxing";
console.log(str.charCodeAt(0)); //122

codePointAt方法,能夠正確處理 4 個位元組儲存的字元,返回一個字元的碼點。方法返回 一個 Unicode 編碼點值的非負整數。
用法:str.codePointAt(pos)
引數:pos這個字串中需要轉碼的元素的位置。
codePointAt方法返回的是碼點的十進位制值,如果想要十六進位制的值,可以使用toString方法轉換一下s.codePointAt(2).toString(16)

let str="zhangxing";
console.log(str.codePointAt(0)); //122

String.fromCodePoint()

ES5 提供String.fromCharCode方法,用於從碼點返回對應字元,但是這個方法不能識別 32 位的 UTF-16 字元(Unicode 編號大於0xFFFF)。

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

ES6 提供了String.fromCodePoint方法,可以識別大於0xFFFF的字元,彌補了String.fromCharCode方法的不足。在作用上,正好與codePointAt方法相反。

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

上面程式碼中,如果String.fromCodePoint方法有多個引數,則它們會被合併成一個字串返回。
注意,fromCodePoint方法定義在String物件上,而codePointAt方法定義在字串的例項物件上。

字串的遍歷器介面

ES6 為字串添加了遍歷器介面,使得字串可以被for...of迴圈遍歷。

let str="zhangxing";
for(let i of str){
    console.log(i);
}
//z h a n g ....

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

上面程式碼表示,使用第二個引數n時,endsWith的行為與其他兩個方法有所不同。它針對前n個字元,而其他兩個方法針對從第n個位置直到字串結束。

repeat()

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

"si".repeat(10);//sisisisisisisisisisi

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'

上面程式碼中,padStart和padEnd一共接受兩個引數,第一個引數用來指定字串的最小長度,第二個引數是用來補全的字串。

如果原字串的長度,等於或大於指定的最小長度,則返回原字串。

'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'

如果用來補全的字串與原字串,兩者的長度之和超過了指定的最小長度,則會截去超出位數的補全字串。

'abc'.padStart(10, '0123456789')
// '0123456abc'

如果省略第二個引數,預設使用空格補全長度。

'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '

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"

模板字串

模板字串(template string)是增強版的字串,用反引號(`)標識。它可以當作普通字串使用,也可以用來定義多行字串,或者在字串中嵌入變數。

// 字串中嵌入變數
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
//如果在模板字串中需要使用反引號,則前面要用反斜槓轉義。
let greeting = `\`Yo\` World!`;

如果使用模板字串表示多行字串,所有的空格和縮排都會被保留在輸出之中。

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`.trim());
//上面程式碼中,所有模板字串的空格和換行,都是被保留的,比如<ul>標籤前面會有一個換行。如果你不想要這個
//換行,可以使用trim方法消除它。

模板字串中嵌入變數,需要將變數名寫在${}之中。大括號內部可以放入任意的 JavaScript 表示式,可以進行運算,以及引用物件屬性。

let x = 1;
let y = 2;

`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"

let obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"

模板字串之中還能呼叫函式。

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

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

模板字串甚至還能巢狀。

const tmpl = addrs => `
  <table>
  ${addrs.map(addr => `
    <tr><td>${addr.first}</td></tr>
    <tr><td>${addr.last}</td></tr>
  `).join('')}
  </table>
`;

上面程式碼中,模板字串的變數之中,又嵌入了另一個模板字串,使用方法如下。

const data = [
    { first: '<Jane>', last: 'Bond' },
    { first: 'Lars', last: '<Croft>' },
];

console.log(tmpl(data));
// <table>
//
//   <tr><td><Jane></td></tr>
//   <tr><td>Bond</td></tr>
//
//   <tr><td>Lars</td></tr>
//   <tr><td><Croft></td></tr>
//
// </table>

如果需要引用模板字串本身,在需要時執行,可以像下面這樣寫。

// 寫法一
let str = 'return ' + '`Hello ${name}!`';
let func = new Function('name', str);
func('Jack') // "Hello Jack!"

// 寫法二
let str = '(name) => `Hello ${name}!`';
let func = eval.call(null, str);
func('Jack') // "Hello Jack!"

String.raw()

String.raw() 是一個模板字串的標籤函式,是用來獲取一個模板字串的原始字面量值的。
用法:String.raw(callSite, ...substitutions)
String.rawtemplateString`
引數:
callSite一個模板字串的“呼叫點物件”。類似{ raw: [‘foo’, ‘bar’, ‘baz’] }
…substitutions任意個可選的引數,表示任意個內插表示式對應的值。
templateString`:模板字串。
返回:給定模板字串的原始字面量值。

String.raw `Hi\n!`;                 
// "Hi\\n!",這裡得到的不是 Hi 後面跟個換行符,而是跟著 \ 和 n 兩個字元

String.raw `Hi\u000A!`;             
// "Hi\\u000A!",同上,這裡得到的會是 \、u、0、0、0、A 6個字元,
// 任何型別的轉義形式都會失效,保留原樣輸出,不信你試試.length

let name = "Bob";
String.raw `Hi\n${name}!`;             
// "Hi\\nBob!",內插表示式還可以正常執行

String.raw({raw: "test"}, 0, 1, 2); 
// "t0e1s2t",我認為你通常不需要把它當成普通函式來呼叫12345678910111213