今天的主題:字串與模板字串

Day 2 學了 let 可以聯想成'蛋糕胚'、const 可以聯想成'岩石'——今天發現,不管是岩石還是蛋糕,都能拿來組成字串。差別只在於:蛋糕能變化(加一層、被吃掉),岩石不行,所以岩石適合當物品名稱(例如角色名字,整場遊戲不會變),蛋糕適合當數值(例如血量,戰鬥中會一直變動)。今天要學的,就是怎麼把這些「岩石」跟「蛋糕」組合成一句完整的話。

字串怎麼「相加」

用 + 可以把字串接在一起:

const heroName = "勇者";
let hp = 100;
let atk = 20;

console.log(heroName + " 的 HP: " + hp + " / 攻擊: " + atk);

輸出:

勇者 的 HP: 100 / 攻擊: 20

這個寫法能動,但東西一多,+ 號跟引號會讓程式碼變得很難讀,而且很容易手滑漏掉空格。
如果需要拼接的字串很長,也容易忘記幫每一段補上引號。

模板字串:用反引號 + ${}

JavaScript 提供更好讀的寫法,叫「模板字串」,用反引號(不是單引號、也不是雙引號)包起來,裡面直接用 ${變數名} 塞值:

console.log(`${heroName} 的 HP: ${hp} / 攻擊: ${atk}`);

輸出結果跟 + 拼接完全一樣,但可讀性高很多,之後寫戰鬥訊息(像「勇者攻擊!造成 15 傷害」)會大量用到這個寫法。

我故意犯的錯:引號打錯,${} 就不會被解析

我試著把反引號換成一般的雙引號,結果:

console.log("${heroName} 的 HP: ${hp}");

輸出:

${heroName} 的 HP: ${hp}

${} 完全沒有被解析,原封不動印出來,連 heroName 和 hp 的值都沒有代進去。這讓我確認了一件事:${} 這個語法只有在反引號包起來的字串裡才有效,一旦用了普通引號,它就只是單純的文字符號,JavaScript 不會多做任何處理。這個坑很值得自己踩一次,因為光看說明文字,很難體會「完全沒被解析」跟「解析出錯」是兩種不同的感覺——親眼看到那行原封不動的 ${} 印出來,比任何解釋都更有記憶點。

小結

今天搞懂的事:

• + 拼接和模板字串都能組出一樣的結果,模板字串只是比較好讀、不容易漏空格
• 不管變數是用 const 還是 let 宣告,都能自由拿來拼字串,宣告方式只影響「能不能重新賦值」,不影響「能不能被讀取使用」
• ${} 只有在反引號字串裡才會生效,打成一般引號就會變成單純的文字,不會被解析

明天繼續學 if/else 條件判斷——QA 最愛的邊界測試,終於要正式登場。