字串的擴充套件
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>
`;
複製程式碼