如何在 JavaScript 中進行字串插值

Kirill Ibrahim 2023年10月12日
如何在 JavaScript 中進行字串插值

JavaScript 有一個很好的功能,叫做字串插值,可以直接在字串中注入一個變數、一個函式呼叫和一個算術表示式。

在本文中,我們將介紹如何進行字串插值。下面我們會有程式碼示例,大家可以在機器上執行。

在 JavaScript 中利用 ES6 的新特性進行字串插值運算

在 ES6 釋出之前,JavaScript 中沒有字串插值功能。由於缺乏這一功能,導致了字串連線程式碼,如下圖所示。

例子

const generalInformation = (firstName, lastName, Country) => {
  return 'First Name ' + firstName + ' Last Name: ' + lastName + '. ' +
      Country + ' is my country.';
} console.log(generalInformation('Mark', 'John', 'US'));

輸出:

First Name Mark Last Name: John. US is my country.

字串插值是一個允許你直接將變數、函式呼叫和算術表示式注入到字串中的功能,而不需要對多行字串使用連詞或轉義字元。

在字串插值中,我們使用回標來表示模板字元,並使用格式–${ourValue} 來插入變數、函式呼叫和算術表示式等動態值。

例子

const generalInformation = (firstName, lastName, Country) => {
  return `First Name: ${firstName} Last Name: ${lastName}. Country: ${Country}`;
} console.log(generalInformation('Mark', 'John', 'US'));

輸出:

First Name: Mark Last Name: John. Country: US

我們現在知道了字串內插是一個多麼神奇的功能。

例子

讓我們注入一個函式呼叫和一個算術表示式。

const generalInformation = (firstName, lastName, Country) => {
  return `First Name: ${firstName} Last Name: ${lastName}. Country: ${Country}`;
} console.log(generalInformation('Mark', 'John', 'US'));

console.log(`${generalInformation("Mark", "John", "US")} He is a Worker in our company.`);  

console.log(`sum of 10 and 6 is ${10+6}.`); 

輸出:

First Name: Mark Last Name: John. Country: US
First Name: Mark Last Name: John. Country: US He is a Worker in our company.
sum of 10 and 6 is 16.

例子:

我們可以在字串插值中使用條件語句。

const isEvenOrOdd = (num) => {
  console.log(`Number is ${num % 2 === 0 ? 'even' : 'odd'}`);
} isEvenOrOdd(5);
isEvenOrOdd(8);

輸出:

Number is odd
Number is even

相關文章 - JavaScript String