ES6 - 基礎學習(4): 模板字元串和字元串新增方法

模板字元串

　　模板字元串：我理解為將字元串格式化、模板化，將字元串加強處理，此處的模板有動詞的意思。

　　字元串模板基本格式： `xxxxxx`（前後都用反引號【tab鍵上面按鍵】引起來）。除了作為普通字元串 外；還可以用來定義多行字元串；也可以在字元串中插入變數和表達式，進行字元串內容擴充和計算。

　　1、普通字元串：

　　let testStr = `ES6 TestDemo`;
　　console.log(testStr);    // ES6 TestDemo

　　2、普通字元串 添加標簽、換行符：

　　let testStr = `ES6 TestDemo <H1>index文件</H1> \n 換行顯示`;
　　document.write(testStr);
　　console.log(testStr);

　　　　　　圖1：頁面顯示內容　　　　　　　　　　圖2：控制台列印內容

　　3、多行字元串：

　　let testStr = `ES6 TestDemo,
 　　index文件,<br/>換行顯示`;
　　document.write(testStr);
　　console.log(testStr);

 　　4、字元串內插入變數、表達式和方法：變數名、表達式和方法都寫在 ${} 中，如 ${xxxxxx} 。

　　let parStr1 = "TestDemo";            // 變數
　　let parStr2 = '16:42';
　　let parNum = 20;
　　let testFun = function testFun() {    // 方法
   　　 return '測試方法!';
　　};
　　// function testFun(){                // 方法
　　//     return '測試方法!';
　　// }
　　let testStr = `ES6 ${parStr1},當前時間 ${parStr2}，
　　今天是放假的第${parNum + 1}天，一共放假${(parNum + 1) * 24}小時了。現在執行下${testFun()}`;    // ${parStr1}、${parStr2}是變數，${parNum + 1}、${(parNum + 1)*24}、${testFun()}是表達式　　(註：兩種聲明方法都能正常執行)
　　document.write(testStr);
　　console.log(testStr);

　　模版字元串功能很強大，實際開發過程中，可以寫一個活動頁面或拼接頁面，然後通過組件掛載 或ajax請求參數載入 然後顯示給用戶。

　　同時需要註意的是 模板字元串中的換行('\n'，<br/>)、空格( )，以及HTML標簽，瀏覽器渲染時都會正常渲染出來；但控制台列印時，代碼是怎樣的，列印出來也就是怎樣的。

　　let testStr = `<b>ES6</b> ${parStr1},當前時間 ${parStr2}，
　　今天是放假的第${parNum + 1}天，一共放假${(parNum + 1) * 24}小時了。
　　現在執行下${testFun()}`;    

 符串新增方法

　　字元串新增方法很多：