iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 24
0
Modern Web

從零開始進入 JavaScript & TypeScript 的世界系列 第 24

第 24 天-提高程式碼品質的樣板字串(Template String)

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

今天想跟大家分享的是一個好用的字串插補或添加方式,這個方式可以提高我們程式碼的可讀性和可維護性,使用起來也是方便簡單。就讓我們先拿 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來判斷!當文字越來越複雜時,就會越難一眼看出它的結果。

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


上一篇
第 23 天-好用的柯里化(Currying)
下一篇
第25天-交叉型別(Intersections Types)
系列文
從零開始進入 JavaScript & TypeScript 的世界30

尚未有邦友留言

立即登入留言