iT邦幫忙

2023 iThome 鐵人賽

DAY 3
0
自我挑戰組

菜鳥建立自信心系列 第 3

Javascript - 反引號(backtick)使用方式

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20230919/20162681ByHdnWZvqk.png
反引號(backtick)在鍵盤Esc的正下方
使用反引號的優點
1.可以輕鬆完成多行的字符串,而不必用換行符(\n)
2.反引號允許在字串中樣板字串插入表達式,只要使用 ${expression}語法,這使得動態新增字串變得非常方便
3.容易閱讀的特性,樣板字串的語法容易閱讀而且更直觀,特別在字串裡面包含變數或表達式,和傳統字串拼湊做比較,反引號更容易理解

建立樣板字串

const name = 'Alice';
const greeting = `Hello, ${name}!`;
console.log(greeting);
// 輸出:Hello, Alice!

建立多行的樣板字串

const multiLineText = `
I am
multi-line
string.
`;
console.log(multiLineText);
/*
輸出:
I am
multi-line
string.
*/

如果是使用換行符(\n),不直觀且不容易看懂

const multiLineText = "This is a\nmulti-line\nstring.";
console.log(multiLineText);
/*
輸出:
This is a
multi-line
string.
*/

嵌入樣板字串

const firstName = 'John';
const lastName = 'Doe';
const fullName = `My name is ${firstName} ${lastName}`;
console.log(fullName);
// 輸出:My name is John Doe

在function中使用樣板字串:

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('Bob'));
// 輸出:Hello, Bob!

參考mdn文件如下
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Template_literals


上一篇
Javascript - 原始資料類型(Primitive Data Types)
下一篇
Javascript類型轉換 - Number( ) parseInt( )
系列文
菜鳥建立自信心30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言