ES6對於字符串的擴展
在字符串方面, ES6這次也是花了大心血了, 從新的Unicode編碼到字符串的擴展方法到字符串的迭代接口, 新增了很多的新特性, 筆者在這裏會挑一些自己覺得平時用的多的寫一寫
目錄(標紅代表比較重要):
-
includes()
-
startsWith() / endsWith()
-
repeat()
-
padStart() / padEnd()
-
模板字符串
includes(str, startIndex)
在ES5中如果我們要判定一個字符串中是否包含另一個字符串的話, 通常我們會使用indexOf, 如下
var str = 'helloWorld';
console.log(str.indexOf('hello')); // 輸出0
console.log(str.indexOf('mine')); // 輸出-1
// 如果爲-1則代表false, 如果爲true的話會直接返回包含字符串的索引
而在ES6中, 官方給我們提供了一個更加純粹語義化也更加好的方法來判定一個字符串是否包含另一個字符串, 該方法就是includes
includes是字符串原型上的一個方法, 他接受的第一個參數爲被檢索的字符串, 同時如果找到了參數字符串則會返回true, 反之false
let str = 'helloWorld';
console.log(str.includes('hello')); // 輸出true 檢索str中是否包含'hello'字符串
console.log(str.includes('mine')); // 輸出false
includes接收的第二個參數爲一個索引值, 他表示從第幾位開始檢索(索引開始值爲0, 代表從第0位開始查)
let str = 'helloWorld';
console.log(str.includes('hello', 0)); // true
console.log(str.includes('hello', 1)); // false
console.log(str.includes('World', 5)); // true
如果填的索引值小於0, 他也會從0開始, 如果大於索引最大值（length - 1）, 則直接返回false
let str = 'helloWorld';
console.log(str.includes('hello', -100)); // true
console.log(str.includes('d', 9)); // true
console.log(str.includes('d', 10)); // false
startsWith(str, startIndex) / endsWith(str, frontLength)
在推出includes的同時, 也順帶捎上了這倆哥們, startWith和endWith
startsWith(str, startIndex)
startsWith表示一個字符串是否是以另一個字符串開頭
他接收的第一個參數就是被檢索字符串, 如果確實是以被檢索字符串開頭返回true, 否則返回false
const str = 'helloWorld';
console.log(str.startsWith('hello')); // true
console.log(str.startsWith('he')); // true
console.log(str.startsWith('ell')); // false
他接收的第二個參數跟includes一樣, 代表從第幾位開始檢索, 他的規則也與includes一樣
const str = 'helloWorld';
console.log(str.startsWith('hello', -200)); // true
console.log(str.startsWith('d', 10)); // false
console.log(str.startsWith('he', 2)); // false
endsWith(str, frontLength)
endsWith表示一個字符串是否以另一個字符串結尾
同樣, 這哥們也跑不掉的, 他第一個參數就是被檢索字符串, 如果確實是以被檢索字符串結尾返回true, 否則返回false
const str = 'helloWorld';
console.log(str.endsWith('World')); // true
console.log(str.endsWith('d')); // true
console.log(str.endsWith('hello')); //false
他也有第二個參數, 但是這哥們的第二個參數是代表前多少位, 填上第二個參數代表在前多少位之前的參數是否以被檢索字符串結尾
const str = 'helloWorld';
console.log(str.endsWith('World', 10)); // true
console.log(str.endsWith('Wo', 6)); // false
console.log(str.endsWith('hello', 5)); // true
repeat()
調用原型上的repeat方法會返回一個新的字符串, 返回的新字符串是將調用這個方法的字符串重複n遍的結果
let str = 'cool';
let newStr = str.repeat(3);
console.log(newStr); // coolcoolcool
let secStr = str.repeat(); // 如果不傳值返回空 ''
console.log(secStr);
let trdStr = str.repeat(1.5); // 如果傳小數會被取整, 調用parseInt, 所以返回cool
console.log(trdStr);
let fthStr = str.repeat(0); // 寫0也是返回空 ''
console.log(fthStr);
let fifthStr = str.repeat(-10); // 寫負數直接報錯: RangeError: Invalid count value
console.log(fifthStr);
如果傳進去的是非數字, 會先將參數丟進Number中轉化爲數字, 如果轉化後不是正常數字, 則返回空
let str = 'cool';
let newStr = str.repeat(true);
console.log(newStr); // cool
let secStr = str.repeat('abc');
console.log(secStr); // ''空
padStart(minLength, str) / padEnd(minLength, str)
ES7中推出了兩個針對字符串補全的方法, padStart和padEnd
padStart(minLength, str)
如果調用該方法的字符串長度不夠, 他將會從索引第0位開始補全
padStart接收的第一個參數爲調用該方法字符串的最小長度, 第二個參數是用來進行補全的字符串
let str = 'o'; // 字符串長度爲1
let newStr = str.padStart(5, 'hell');
console.log(newStr); //hello
如果進行補全的字符串長度 + 原始字符串長度已經大於第一個參數最小長度值, 則會對補全字符串進行裁剪
如果原始字符串長度就已經大於或者等於第一個參數最小長度值, 則直接返回原始字符串
let str = 'hello';
let newStr = str.padStart(7, 'World');
console.log(newStr); // Wohello
let secStr = 'hello';
let secNewStr = secStr.padStart(5, 'World');
console.log(secNewStr); // hello
let trdStr = 'hello';
let trdNewStr = trdStr.padStart(3, 'World');
console.log(trdNewStr); // hello
如果省略第二個參數, 則會用第一個空格補全
let str = 'hello';
let newStr = str.padStart(7);
console.log(newStr); // " hello"
padEnd(minLength, str)
padEnd所有規則與padStart一致, 唯一的區別就是padStart是從索引0位開始補全, 而padEnd是從最後一位開始補全
模板字符串
模板字符串是ES6對字符串提供的新特性中至今爲止應用最廣泛, 而且效果最顯著的特性, 模板字符串的推出給我們提供了一種新的書寫字符串的方式
在ES5中, 當我們在js中書寫一個html模板的時候是比較吃力的如下
var words = 'helloWorld'
var htmlStr = "<div></span>" + words + "</span></div>" +
"<div>mine</div>";
如果好一點的在換行那可能整個轉義字符, 但是無論是怎麼寫, 其實對於我們來說都很麻煩, 特別是處理比較複雜的又摻雜變量字符串
而ES6模板字符串的到來完全就是救世主, 模板字符串語法以反引號```````標識, 上方同樣的html模板用模板字符串寫法如下
let words = 'helloWorld';
let htmlStr = `<div>
<span>${words}</span>
</div>
<div>mine</div>`
就這樣就成了, 完全不用一直拼接來拼接去, 想想如果是有個七八行字符串的拼接有模板字符串的話也不累了
模板字符串中的一些注意事項如下
- 模板字符串以反引號進行```````標識, 如果在模板字符串中需要使用反引號, 則要進行轉義
const str = `hello \``;
- 在模板字符串中使用變量, 要將變量至於
${}標識符中
let name = 'loki';
let age = 18;
let stu = `學生姓名: ${ name }, 學生年齡: ${ age }`;
console.log(stu); // 輸出： 學生姓名: loki, 學生年齡: 18
${}標識符中可以進行計算, 可以傳入js表達式, 也可以進行函數的調用
let x = 10,
y = 20;
let calcStr = `${ x } + ${ y } = ${ x + y } `;
console.log(calcStr); // 10 + 20 = 30
let str = `${ x < y ? 'x < y' : 'x > y' }`;
console.log(str); // x < y
function foo() {
return '我是函數'
}
let funcStr = `${ foo() }`;
console.log(funcStr); // 我是函數
模板字符串還可以進行封裝進行各種編譯模板和標籤模板的生成, 如果對這些感興趣可以自己查查資料或者思考思考
至此, 一些ES6在字符串上新增的常用特性已經解釋完畢了, 希望我都寫清楚了
