字符串的擴展

模板字符串

 傳統的 JavaScript 語言，都是使用 ‘’  或者  “”  來把字符串套起來，然后使用 + 拼接一些定義的變量， ES6 改進了這種方法，使用一個  ~  [反引號] （就是 Tab 鍵上面那個 ~ ，我也叫 它 飄鍵），使用 $(美元符號)  包裹變量就可以讓寫法更加簡單 ，下面舉個簡單的例子

//es5    
let name = 'itcast'    
console.log('hello ' + name)  //hello itcast
//es6    
const name = 'itcast'    
console.log(`hello ${name}`) //hello itcast

可以看到 兩種寫法結果都是一樣的，這樣看來好像 使用 ~ 也沒有簡便太多，可能是代碼量太少了，如果變量拼接字符串 有許多的話，就會頻繁的 使用  “ ” 和 +  來拼接字符串和變量，這樣的代碼就比較臃腫， 這個時候就可以體現模板字符串的好處

 <script>
        var username = "張三"
        var age = 30
        var date = "星期一"
        // 1: 原始的做法就是去拼接字符串
        var str1 = " hello ,"+ "我名字叫 " + username + ",年齡是: " + age + "歲" 
        console.log(str1);  
        // 2:用模板字符串來拯救 注意：這里是 `（飄鍵） (tab鍵盤的上面那個鍵)
        var str2 = `hello,我名字叫 ${username},年齡是: ${age}歲`;
        console.log(str2);
    </script>

上面舉的簡單例子其實代碼量也不是很多，倒也使用了許多的 " " 和 + ，這樣看起來代碼也有些許臃腫，這個時候使用 ES6 的模板字符串就比較方便，代碼的可讀性會得到提高

模板字符串運算

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

如果需要引用模板字符串本身，在需要時執行，可以寫成函數。

let func = (name) => `Hello ${name}!`;
func('Jack') // "Hello Jack!"

上面代碼中，模板字符串寫成了一個函數的返回值。執行這個函數，就相當于執行這個模板字符串了。

新增方法

repeat()

repeat 方法返回一個新字符串，表示將原字符串重復 n次。

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

參數如果是小數，會被向下取整。

'na'.repeat(2.9) // "nana"

如果repeat的參數是負數或者Infinity，會報錯。

注意：

如果參數是 0 到-1 之間的小數，則等同于 0，這是因為會先進行取整運算，取整以后等于-0，repeat視同為 0。

'na'.repeat(-0.9) // ""

 參數NaN等同于 0。

'na'.repeat(NaN) // ""

 如果repeat的參數是字符串，則會先轉換成數字。

'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"

includes(), startsWith(), endsWith() 

傳統上，JavaScript 只有indexOf方法，可以用來確定一個字符串是否包含在另一個字符串中。ES6 又提供了以下三種新方法，它們分別有不同的適用場景，個人感覺 使用 較多的是 includes（）方法 ，我的這篇文章 使用 includes（）實現簡單搜索

• 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個位置直到字符串結束。

 注意：關于 ES6 的字符串相關拓展，它還有很多其他的新增方法，這里只列舉出我個人使用較多的少量方法

文章如有錯誤，懇請大家提出問題，本人不勝感激 。 不懂的地方可以評論，我都會一一回復

文章對大家有幫助的話，希望大家能動手點贊鼓勵，大家未來一起努力     長路漫漫，道阻且長