模板字符串的一些用法小记

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>

 

posted @ 2024-11-04 14:02  kingsnowcan  阅读(3)  评论(0编辑  收藏  举报