當你需要把許多字串 + (加) 起來，但是又覺得這樣可讀性不高的時候，就可以考慮使用樣板字串了。

今天想跟大家分享的是一個好用的字串插補或添加方式，這個方式可以提高我們程式碼的可讀性和可維護性，使用起來也是方便簡單。就讓我們先拿 Hello World 的例子來當範例吧!

let helloWorld = (user: string) => {
    console.log("Hello World!! " + user);
}
helloWorld("Kenny!") // 結果會是 Hello World!! Kenny!

如果改成樣板字串的寫法，就會像這樣:

let helloWorld: Function = (user: string) => {
    console.log(`Hello World!! ${user}!`);
}

helloWorld("Kenny!");

有沒有覺得 Hello World!! ${user}! 的可讀性比 Hello World!! + user 來的高呢?

或許有人會覺得好像差不多，我想可能是因為範例太簡單的原因。那就讓我們換一個範例來試試看，不過在分享下一個範例之前，先介紹一下關於樣板字串的語法。

樣板字串語法規定只能用兩個反引號(`)把字串給包住，然後變數必須使用一個錢字號和兩個大括號包住。例如上面的例子變數 user 就會變成 `Some text here ${user}`

較複雜的範例

請看這段程式碼有沒有麼問題呢?

function buildQueryExample(
    selectedKey: string, fromTable: string, filter: string): string {

    let query =
        'SELECT' + selectedKey +
        'FROM' + fromTable +
        'WHERE' + filter;
    return query;
}

上面那段範例，有沒有發現什麼問題呢?由於這樣的可讀性不高所以你可能沒有發現，如果有發現，只能說你真的很細心!呵呵!!

上面那段程式碼如果真的跑起來，問題真的很大，那就是少了空白，如果我們把它列印出來看就會變成這樣:

const queryCommand = buildQueryExample('name', 'student', 'score>=60');
console.log(queryCommand);
// 結果會是 SELECTnameFROMstudentWHEREscore>=60

有沒瞬間覺得，啊!!我怎麼沒注意到!!殘念! 但如果我們把範例的邏輯原封不動，只把 + 改成 字串樣板 方式:

function buildQueryExample(
    selectedKey: string, fromTable: string, filter: string): string {

    let query = `SELECT${selectedKey}FROM${fromTable}WHERE${filter}`;
    return query;
}

是不是突然發現，這樣寫根本就是腦殘 XDD，會想馬上把它修正如下呢?

let query = `SELECT ${selectedKey} FROM ${fromTable} WHERE ${filter}`;

另外，關於多行字串也是。舉例來說下面兩種寫法的輸出結果都會是一樣的。

console.log("我是第一行\n我是第二行\n我是第三行");
console.log(`我是第一行
我是第二行
我是第三行
`);
// 兩個 console.log 的輸出結果都是一樣的，如下:
// 我是第一行
// 我是第二行
// 我是第三行

但是有沒有覺得，使用樣板字串就很明確是兩行，沒使用樣板字串就必須要看\n來判斷!當文字越來越複雜時，就會越難一眼看出它的結果。

雖然這感覺上是一個很小的功能，但它真的可以大大的提升我們程式碼的可讀性和可維護性! 因此強烈件事多使用這個功能!