JavaScript 中的模板字符串是一种方便的字符串语法,允许你在字符串中嵌入表达式和变量。
模板字符串使用反引号 `` 作为字符串的定界符分隔的字面量。
模板字面量是用反引号(`)分隔的字面量,允许多行字符串、带嵌入表达式的字符串插值和一种叫带标签的模板的特殊结构。
语法
`string text`
`string text line 1
string text line 2`
`string text ${expression} string text`
tagFunction`string text ${expression} string text`
参数
- string text:将成为模板字面量的一部分的字符串文本。几乎允许所有字符,包括换行符和其他空白字符。但是,除非使用了标签函数,否则无效的转义序列将导致语法错误。
- expression:要插入当前位置的表达式,其值被转换为字符串或传递给 tagFunction。
- tagFunction:如果指定,将使用模板字符串数组和替换表达式调用它,返回值将成为模板字面量的值。
实例
let text = `Hello RUNOOB!`;
浏览器支持
模板字面量是 ES6 新特性 (JavaScript 2015),目前一些最新版本浏览器都支持:
Chrome | Edge | Firefox | Safari | Opera |
支持 | 支持 | 支持 | 支持 | 支持 |
模板字符串中可以同时使用单引号和双引号:
实例
let text = `He's often called "Runoob"`;
模板字符串还支持多行文本,而无需使用特殊的转义字符:
实例
const multiLineText = `
This is
a multi-line
text.
`;
若要转义模板字面量中的反引号(`),需在反引号之前加一个反斜杠(\)。
`\`` === "`"; // true
模板字面量用反引号(`)括起来,而不是双引号(")或单引号(')。
除了普通字符串外,模板字面量还可以包含占位符——一种由美元符号和大括号分隔的嵌入式表达式:${expression}。
字符串和占位符被传递给一个函数(要么是默认函数,要么是自定义函数)。默认函数(当未提供自定义函数时)只执行字符串插值来替换占位符,然后将这些部分拼接到一个字符串中。
模板字符串中允许我们使用变量:
实例
const name = 'Runoob';const age = 30;const message = `My name is ${name} and I'm ${age} years old.`;
以上实例中,${name} 和 ${age} 是模板字符串的表达式部分,它们被包含在 ${} 内部,并在运行时求值。
模板字符串允许你在字符串中引用变量、执行函数调用和进行任意的JavaScript表达式。
模板字符串中允许我们使用表达式:
实例
let price = 10;
let VAT = 0.25;
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;
模板字符串当作 HTML 模板使用:
实例
let header = "";
let tags = ["RUNOOB", "GOOGLE", "TAOBAO"];
let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
html += `<li>${x}</li>`;
}
html += `</ul>`;
2 篇笔记 写笔记
const name = 'John';
const age = 31;
const job = 'Web Developer';
const city = 'Beijing';
function hello(){
return 'hello';
}
let str =`
Name:${name}
age:${age}
job:${job}
city:${city}
calc:${2+2}
function:${hello()}
sanmu: ${age >
30 ? 'over 30': 'under 30' }
`
console.log(str);
- Lzk_aliver
Lzk_aliver
291***403@qq.com
11个月前 (10-28)
hown315
zjd***@163.com
20
我也来写一个:
// 定义标签函数
function tagFunction(strings, ...values) {
// strings是模板字符串中不包含变量部分的数组
// values是插值中的所有变量
return strings.reduce((accumulator, str, i) => {
// 对插值变量进行处理
const value = values[i];
// 处理插值变量
const processedValue = (typeof value === 'string')
? `[${value.toUpperCase()}]`
: (typeof value === 'number')
? `[${value * 2}]`
: '';
return accumulator + str + processedValue;
}, '');
}
// 使用标签函数
const xm = 'Fitten';
const ll = 5;
const result = tagFunction`Hello, my name is ${xm} and I am ${ll} years old.`;
console.log(result); // 输出: Hello, my name is [FITTEN] and I am [10] years old.
- 在这个例子中,`tagFunction`被用来处理模板字符串并将变量部分中字符串变量转换为大写,将数字乘以2,同时加上方括号标记。