ES6字串的擴充套件

Judy1623發表於2018-12-26
字串套件

字串的擴充套件

1.字元的 Unicode 表示法

rest引數與陣列

function log(...value) {
  console.log(value);
  console.log(...value);
}

log([1,2,3]);
// [ [ 1, 2, 3 ] ]
// [ 1, 2, 3 ]
log(1,2,3);
// [ 1, 2, 3 ]
// 1 2 3
複製程式碼

2.字串的遍歷

使用for...of迴圈遍歷

for(let item of 'foo'){
console.log(item); //'f' 'o' 'o'
}
複製程式碼

3.includes(),startsWith(),endsWith()

傳統的字串只有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 前5個字串
s.includes('Hello',6)//false
//上面程式碼表示，使用第二個引數n時，**endsWith的行為與其他兩個方法有所不同。它針對前n個字元，**而其他兩個方法針對從第n個位置直到字串結束。
複製程式碼

4.repeat()

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

'x'.repeat(3)//'xxx'
'hello'.repeat(2)//'hellohello'
'na'.rapeat(0) //''
複製程式碼

如果引數是小數，則會取整。

'na'.repeat(2.9) //'nana'
複製程式碼

如果引數是負數或者是Infinity,會報錯

'na'.repeat(Infinity)
//RangError
'na'.repeat(-1)//RangError
複製程式碼

如果引數在0到-1之間則視為為0

'na'.repeat(-0.9) //''
//引數NaN等同於0
'na'.repeat(NaN)//''
//如果引數是字串則會先轉換成數字
'na'.repeat('na') //''
'na'.rapeat('3')//'nanana'
複製程式碼

5.padStart(),padEnd()

字串補全的功能 padStart()用於頭部補全，padEnd()用於尾部補全。

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

'x'.padEnd(5,'ab');//'xabab'
'x'.padEnd(4,'ab');//'xaba'
複製程式碼

如果原字串的長度，等於或大於最大長度，則字串補全不生效，返回原字串。

'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"
複製程式碼

6.字串嵌入變數

// 字串中嵌入變數
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
複製程式碼

大括號內部可以放入任意的 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
複製程式碼

如果模板字串中的變數沒有宣告，將報錯。

// 變數place沒有宣告
let msg = `Hello, ${place}`;
// 報錯

//由於模板字串的大括號內部，就是執行 JavaScript 程式碼，因此如果大括號內部是一個字串，將會原樣輸出
`Hello ${'World'}`
// "Hello World"

模板字串甚至還能巢狀。
const tmpl = addrs => `
  <table>
  ${addrs.map(addr => `
    <tr><td>${addr.first}</td></tr>
    <tr><td>${addr.last}</td></tr>
  `).join('')}
  </table>
`;

複製程式碼

相關文章