提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加
例如:第一章 Python 机器学习入门之pandas的使用
``
此时,用法与""
全等。
const a = `in js '/n' is a line-feed.`;
a // "in js '/n' is a line-feed."
trim()
方法消除。 const b = `In JS this is
not legal.`
b // 'In JS this is\n not legal.'
console.log(`string text line 1
string text line 2`);
/* string text line 1
string text line 2 */
console.log(`
string text line 1
string text line 2`.trim());
const box = document.querySelector('.box');
let htmlStr = `
-
你好
`;
box.innerHTML = htmlStr;
${}
中。${}
中可放入任意JavaScript表达式。如,运算,引用对象属性,调用函数等。let x = 1;
let y = 2;
// 运算
`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"
`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"
// 引用对象属性
let obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"
// 调用函数
function fn() {
return "Hello World";
}
`foo ${fn()} bar`
// foo Hello World bar
let greeting = `\`Yo\`, World!`;
greeting // '`Yo`, World!'
如果大括号中的值不是字符串,将按照一般的规则转为字符串。比如,大括号中是一个对象,将默认调用对象的toString方法。
如果模板字符串中的变量没有声明,将报错。
// 变量place没有声明
let msg = `Hello, ${place}`;
// 报错 ReferenceError: place is not defined
const greeting = `Hello ${'World'}`;
greeting // 'Hello World'
详情见《ECMAScript 6 入门》阮一峰
详情见《ECMAScript 6 入门》阮一峰
const Jelly = {
name: 'Jelly',
date: '2022-08-06',
todos: [
{ name: 'Go to Store', completed: true },
{ name: 'Watch the Movie', completed: false },
{ name: 'Running', completed: true },
]
};
function renderTodos(todos) {
return (
`
${Jelly.todos.map(todo => `
${todo.name}${todo.completed ? '✔' : '❌'}
`).join('')}
`
)
}
const template = `
${Jelly.name}
${renderTodos(Jelly.todos)}
`;
document.body.innerHTML = template;
console.log(template);
“”
出现。let a = 5;
let b = 10;
function tag(stringArr, value1, value2){
// ...
}
tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
// tag(['Hello ', ' world ', ''], 15, 50);
// 第一个参数:['Hello ', ' world ', '']
// 第二个参数: 15
// 第三个参数:50
3、如果形参写法为(s,...values)
,则values返回的是一个由变量组成的数组。
let a = 5;
let b = 10;
function tag(stringArr, ...values){
// ...
}
tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
// tag(['Hello ', ' world ', ''], [15, 50]);
// 第一个参数:['Hello ', ' world ', '']
// 第二个参数: [15, 50]
function highlight(strings, ...values) {
const highlighted = values.map(value => `${value}`);
return strings.reduce((prev, curr, i) => `${prev}${curr}${highlighted[i] || ''}`, '')
}
const user = 'Mary';
const topic = 'learn to use markdown';
const sentence = highlight`${user} has commented on your topic ${topic}`;
document.body.innerHTML = sentence;
详情见[《ECMAScript 6 入门》阮一峰 / §标签模板