模板字串的一些用法小記

kingsnowcan發表於2024-11-04
字串
1.插入變數：
使用 ${} 在模板字串中插入變數的值。
const name = 'Alice';
const message = `Hello, ${name}!`;

console.log(message); // 輸出: "Hello, Alice!"html結構

2.表示式求值：

在 ${} 中可以執行任意的 JavaScript 表示式，並將其結果插入到模板字串中。
const x = 3;const y = 4;
const equation = `The result is ${x + y}`;

console.log(equation); // 輸出: "The result is 7"

3.多行字串：

模板字串允許換行符的存在，可以用於建立多行的字串。

const message = `
Hello,
World!
`;

console.log(message);// 輸出:// "// Hello,// World!// "

4.巢狀模板字串：

在一個模板字串中巢狀另一個模板字串。

const name = 'Alice';const greeting = `Welcome to our website, ${`Dear ${name}`}!`;

console.log(greeting); // 輸出: "Welcome to our website, Dear Alice!"

5.模板字串在html結構用法

   <span v-for="(item,i) in dataList" :key="i" @click="switchCom(item.id,i)"
            :class="{active:isActive == i,[`tab_icon_${i}`]:`tab_icon_${i}`}">
            {{ item.title }}
        </span>

相關文章