在 ES6 之前，JS 的多行字符串一直是開發難題，在處理多行字符串時，各種各樣的方案都有~~

在 JS 中，如果直接這樣寫多行字符串：

const str1 = '第一行
第二行';

那瀏覽器轉過來就打臉，分分鐘報錯：

Uncaught SyntaxError: Invalid or unexpected token

ES5 多行字符串

以下多種方式都輸出：

公眾號：
前端路引

1、使用加號拼接：

在每行字符串后面添加 + ，拼接跨行的字符串。

const str2 = '公眾號：' + 
             '前端路引';
console.log(str2);

2、反斜線轉義換行

在每行末尾添加 \，可以做到跨行書寫字符串。

const str3 = '公眾號：\n\
前端路引';
console.log(str3);

3、利用數組保存多行字符串

利用數組的 join 方法，可以實現多個數組元素拼接成字符串。

const str4 = [
  '公眾號：',
  '前端路引'
].join('\n');
console.log(str4);

4、使用注釋保存多行字符串

此方法有點邪門，很早之前就看到過，也不知道出至哪位大佬~~
注意：注釋內容在代碼壓縮時候可能會被刪除。

function multiline(fn) {
  return fn.toString()
    .replace(/^[^\/]+\/\*!?/, '') // 刪除函數定義和注釋起始符
    .replace(/\*\/[^\/]+$/, '');  // 刪除注釋結束符
}
const str5 = multiline(function() {
/*公眾號：
前端路引
*/
});
console.log(str5);

5、使用 HTML 標簽保存多行字符串

使用 type="text/plain" 的 script 標簽多行文本內容，再 JS 中獲取 textContent 即可得到跨行字符串。
此方法是很多瀏覽器端的模板引擎做法，包括 Vue 不使用 Vite 打包時都可以這么玩~~

<script id="multiText" type="text/plain">公眾號：
前端路引</script>

<script>
  const str6 = document.querySelector('#multiText').textContent;
  console.log(str6);
</script>

ES5 多行字符串在使用方法上，總感覺有一點歪門邪道，直到 ES6 模版字符出現，終于實現了大統一~~

ES6 模版字符

使用反引號兩個 （``）包起來的字符串就是模板字符串，模板字符串的各種用法如下：

1、多行字符串

const str7 = `公眾號：
前端路引`;
console.log(str7);

2、字符串插值

模板字符串重點不是用來顯示多行字符串，而是在字符串中間可以插入變量，再也不需要使用 + 拼接了。

const name = '前端路引';
const str8 = `公眾號：
${name}`;
console.log(str8);

// ES5 必須使用 + 拼接
const str9 = '公眾號：\n' + name;
console.log(str9);

模板字符串插值 ${} 中，既然可以使用變量，肯定是也能使用 JS 中的各種表達式，包括函數調用等。比如

const temp1 = `隨機數：${Math.random()}`
const temp2 = `是否大于0.5：${Math.random() > 0.5 ? '是' : '否'}` 

模板字符串的騷操作開始，以下用法在開發中不是很常見~~

3、模板標簽

此寫法第一次見到的時候，一度以為存在語法錯誤~~

function tag(strings, ...values) {
  let result = "";
  strings.forEach((str, i) => {
    result += str;
    if (i < values.length) result += `<tag>${values[i]}</tag>`;
  });
  return result;
}
const name2 = '前端路引';
const age2 = 1
console.log(tag`公眾號：${name2}，年齡：${age2}`);
// 輸出    公眾號：<tag>前端路引</tag>，年齡：<tag>1</tag>

重點代碼：

tag`公眾號：${name2}，年齡：${age2}`

說實話，當時是第一次見到 JS 的 function 調用時候不需要使用括號~~

4、原始字符串

JS 中的字符串，如果存在反引號 \ ，那么就會被當做轉義字符處理，可通過 String.raw 讓字符串不要轉義。

輸出 C:\user\Web3Dev\Documents 這個字符串：

// 不使用 raw 方法就必須使用 `\\` 兩個反引號
console.log('C:\\user\\web3dev\\Documents');

// 使用 raw 方法
console.log(String.raw`C:\user\web3dev\Documents`);

寫在最后

IE 時代，JS 的字符串拼接性一度當做性能優化課題存在，開發建議永遠不要使用 + 去拼接字符，一直都是建議使用數組 join 方法拼接字符串，直到 Chrome 崛起，V8 引擎這個性能怪獸終于讓 JS 的字符串性能飆升，開發者也不用再考慮字符串拼接的性能問題了~~