模板字符串template strings

chonger_feifei

已于 2022-03-01 23:53:51 修改

阅读量423

点赞数

分类专栏： JavaScript 文章标签： es6

于 2022-03-01 23:52:09 首次发布

本文链接：https://blog.csdn.net/chonger_feifei/article/details/123219276

版权

JavaScript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

本文介绍了模板字符串的写法和特点，相较于普通字符串，模板字符串在JavaScript中提供了更便捷的变量注入方式，并能保留空格换行。通过示例展示了如何使用模板字符串进行换行输出、转义字符以及与对象属性、函数结合使用。此外，还应用模板字符串生成了学生信息表的HTML结构。

摘要由CSDN通过智能技术生成

与一般字符串的区别

写法

一般字符串-写在单引号或者双引号里
模板字符串-写在反引号里

作用

模板字符串更方便注入

const person = {
    name: 'ZhangSan',
    sex: 'male',
    age: '18'
};
// const info = '姓名：' + person.name + '性别：' + person.sex + '年龄：' + person.age;
const info = `姓名：${person.name},性别：${person.sex},年龄：${person.age}`;
console.log(info);

空格换行或缩进会保留在输出之中

换行输出3种方法
方法1：一般字符串

const info = '第一行\n第二行';

方法2：模板字符串之使用

const info = `第一行\n第二行`;

方法3：模板字符串之保留换行

const info = `第一行
第二行`;
console.log(info);

特别地，转义

const info = `\``;
const info = `\\`;
const info = `'`;

用${}注入

const username = 'Alex';
const person = { age: 18, sex: 'male' };
const getSex = function (sex) {
    return sex === 'male' ? '男' : '女';
};
const info = `${username},${person.age},${getSex(person.sex)}`;
console.log(info);

应用-学生信息表

<p>学生信息表</p>
<ul id="list">
	<li>信息加载中</li>
</ul>
<script>
	const students = [{
	    name: 'ZS',
	    sex: 'male',
	    age: 18,
	}, {
	    name: 'LS',
	    sex: 'female',
	    age: 20,
	}, {
	    name: 'WW',
	    sex: 'male',
	    age: 21,
	}];
	const list = document.getElementById('list');
	let html = '';
	for (let i = 0; i < students.length; i++) {
	    html += `<li>${students[i].name},${students[i].sex},${students[i].age}</li>`;
	}
	list.innerHTML = html;
</script>