iT邦幫忙

2025 iThome 鐵人賽

DAY 27
0
Modern Web

30天絕望倒數JavaScript系列 第 27

JavaScript String Templates

  • 分享至 

  • xImage
  •  

基本介紹

字串模板(Template Literals)是 JavaScript ES6 引入的新語法,
用來更方便地建立字串、插入變數與換行。
使用 反引號(`) 取代傳統的單引號 ' ' 或雙引號 " "。

基本語法

let name = "Tom";
let message = `Hello, ${name}!`;
console.log(message);

輸出

Hello, Tom!

字串插值

使用 ${} 可以直接在字串中插入變數或表達式。

let a = 10;
let b = 20;

let result = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(result);

輸出

The sum of 10 and 20 is 30.

多行字穿

使用反引號可以輕鬆建立多行字串,不需使用 \n。

let poem = `
Roses are red,
Violets are blue,
JavaScript is fun,
And so are you!
`;

console.log(poem);

輸出

Hello, MARY! Welcome to our site.

搭配物件使用

也可以插入物件屬性或方法的結果:

let person = {
  name: "John",
  age: 25
};

console.log(`Name: ${person.name}, Age: ${person.age}`);

輸出

Name: John, Age: 25

小結

功能 範例 說明
基本插值 `Hello, ${name}` 在字串中插入變數
多行字串 使用 ` ` 可直接換行
表達式 `${a + b}` 可執行運算
呼叫函式 `${fn()}` 可插入函式結果
物件屬性 `${obj.key}` 可存取屬性

上一篇
JavaScript Strings
下一篇
JavaScript String Methods
系列文
30天絕望倒數JavaScript30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言