s6新增三種api方法補(bǔ)充indexOf方法
- includes():返回布爾值，表示是否找到了參數(shù)字符串。
- startsWith():返回布爾值，表示參數(shù)字符串是否在源字符串的頭部晤揣。
- endsWith():返回布爾值，表示參數(shù)字符串是否在源字符串的尾部朱灿。
var s = 'hello world!';
s.startsWith('hello')//true
s.endsWith('!')//true
s.includes('0')//true
- 這三個(gè)方法都支持第二個(gè)參數(shù)昧识，表示開(kāi)始搜索位置。
s.startsWith('world',6)//true
s.endsWith('hello',5)//true
s.includes('hello',6)//false
repeat()方法
'x'.repeat(3);//xxx
//參數(shù)如果是小數(shù)盗扒，會(huì)被取整
'na'.repeat(2.9)//'nana'
//如果repeat的參數(shù)是負(fù)數(shù)或者infinity跪楞，會(huì)報(bào)錯(cuò)
//但是，如果參數(shù)是0到-1之間的小數(shù)侣灶，則等同于0甸祭，這是因?yàn)闀?huì)先進(jìn)行取整運(yùn)算。
0到-1之間的小數(shù)褥影，取整以后等于-0池户，repeat視同為0。
'na'.repeat(-0.9) // ""
//參數(shù)NaN等同于0。
//如果repeat的參數(shù)是字符串校焦，則會(huì)先轉(zhuǎn)換成數(shù)字赊抖。
'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"
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'
- 如果原字符串的長(zhǎng)度报亩，等于或大于指定的最小長(zhǎng)度，則返回原字符串墓猎。
'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'
- 如果用來(lái)補(bǔ)全的字符串與原字符串捆昏，兩者的長(zhǎng)度之和超過(guò)了指定的最小長(zhǎng)度赚楚， 則會(huì)截去超出位數(shù)的補(bǔ)全字符串毙沾。
'abc'.padStart(10, '0123456789')
// '0123456abc'
- 如果省略第二個(gè)參數(shù)，默認(rèn)使用空格補(bǔ)全長(zhǎng)度宠页。
'x'.padStart(4) // ' x'
'x'.padEnd(4) // 'x '
- padStart的常見(jiàn)用途是為數(shù)值補(bǔ)全指定位數(shù)左胞。下面代碼生成10位的數(shù)值字符串。
'1'.padStart(10, '0') // "0000000001"
'12'.padStart(10, '0') // "0000000012"
'123456'.padStart(10, '0') // "0000123456"
- 另一個(gè)用途是提示字符串格式举户。
'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"
模板字符串
- 傳統(tǒng)的JavaScript語(yǔ)言烤宙，輸出模板通常是這樣寫(xiě)的
$('#result').append(
'There are <b>' + basket.count + '</b> ' +
'items in your basket, ' +
'<em>' + basket.onSale +
'</em> are on sale!'
);
- 上面這種寫(xiě)法相當(dāng)繁瑣不方便，ES6引入了模板字符串解決這個(gè)問(wèn)題俭嘁。
$('#result').append(`
There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!
`);
- 模板字符串（template string）是增強(qiáng)版的字符串躺枕，用反引號(hào)（
）標(biāo)識(shí)**``。
它可以當(dāng)作普通字符串使用供填，也可以用來(lái)定義多行字符串拐云，或者在字符串中嵌入變量。
// 普通字符串
`In JavaScript '\n' is a line-feed.`
// 多行字符串
`In JavaScript this is
not legal.`
console.log(`string text line 1
string text line 2`);
// 字符串中嵌入變量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
- 上面代碼中的模板字符串近她，都是用反引號(hào)表示叉瘩。
如果在模板字符串中需要使用反引號(hào)，則前面要用反斜杠轉(zhuǎn)義粘捎。
var greeting = `\`Yo\` World!`;
- 如果使用模板字符串表示多行字符串薇缅，所有的空格和縮進(jìn)都會(huì)被保留在輸出之中。
$('#list').html(`
<ul>
<li>first</li>
<li>second</li>
</ul>
`);
- 上面代碼中攒磨，所有模板字符串的空格和換行泳桦，都是被保留的，
比如<ul>標(biāo)簽前面會(huì)有一個(gè)換行娩缰。如果你不想要這個(gè)換行灸撰，可以使用trim方法消除它。
$('#list').html(`
<ul>
<li>first</li>
<li>second</li>
</ul>
`.trim());
- 模板字符串中嵌入變量，需要將變量名寫(xiě)在${}之中梧奢。
function authorize(user, action) {
if (!user.hasPrivilege(action)) {
throw new Error(
// 傳統(tǒng)寫(xiě)法為
// 'User '
// + user.name
// + ' is not authorized to do '
// + action
// + '.'
`User ${user.name} is not authorized to do ${action}.`);
}
}
- 大括號(hào)內(nèi)部可以放入任意的JavaScript表達(dá)式狱掂，可以進(jìn)行運(yùn)算，以及引用對(duì)象屬性亲轨。
var x = 1;
var y = 2;
`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"
`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"
var obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// 3
- 模板字符串之中還能調(diào)用函數(shù)趋惨。
function fn() {
return "Hello World";
}
`foo ${fn()} bar`
// foo Hello World bar
- 如果大括號(hào)中的值不是字符串，將按照一般的規(guī)則轉(zhuǎn)為字符串惦蚊。
比如器虾，大括號(hào)中是一個(gè)對(duì)象，將默認(rèn)調(diào)用對(duì)象的toString方法蹦锋。
如果模板字符串中的變量沒(méi)有聲明兆沙，將報(bào)錯(cuò)。
// 變量place沒(méi)有聲明
var msg = `Hello, ${place}`;
// 報(bào)錯(cuò)
- 由于模板字符串的大括號(hào)內(nèi)部莉掂，
就是執(zhí)行JavaScript代碼葛圃，因此如果大括號(hào)內(nèi)部是一個(gè)字符串，將會(huì)原樣輸出憎妙。
`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>
`;
- 上面代碼中，模板字符串的變量之中厘唾，又嵌入了另一個(gè)模板字符串褥符，使用方法如下。
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>
- 如果需要引用模板字符串本身抚垃，在需要時(shí)執(zhí)行喷楣，可以像下面這樣寫(xiě)。
// 寫(xiě)法一
let str = 'return ' + '`Hello ${name}!`';
let func = new Function('name', str);
func('Jack') // "Hello Jack!"
// 寫(xiě)法二
let str = '(name) => `Hello ${name}!`';
let func = eval.call(null, str);
func('Jack') // "Hello Jack!"
