大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
前言
ES6(ES2015)为 JavaScript 引入了许多新特性,其中与字符串处理相关的一个新特性——模板字面量,提供了多行字符串、字符串模板的功能,相信很多人已经在使用了。字符串模板的基本使用很简单,今天就带大家来了解了解模板字符串。
一、基本使用
1、传统字符串
传统做法需要使用大量的“”(双引号)和+来拼接才能得到我们需要的模版。但是这样是十分不方便的。并且存下一下几点缺陷:
1)传统的字符串拼接不能正常换行
2)传统的字符串拼接不能友好的插入变量
3)传统的字符串拼接不能友好的处理单引号、双引号互相嵌套的问题。
console.log('string text line 1\n' +
'string text line 2');
// "string text line 1
// string text line 2"
2、模板字符串
使用反引号(`)做标识,可以定义多行字符串,在字符串中使用${}嵌入变量。在模板字符串中的任何变量最终都会变为String类型输出。
console.log(`string text line 1 string text line 2`);
// "string text line 1
// string text line 2"
二、区别
1、拼接区别
普通拼接
var html = '<div>' +
'<img src="" alt="">' +
'<p>Today is a good day</p>' +
'</div>'
模板字符串拼接
var html = ` <div> <img src="" alt=""> <p>Today is a good day</p> </div>`
省了很多 ‘+’ 而且结构更加清晰,更加简单。
2、嵌套区别
普通对象嵌套
let name = "浩东"
let good = "today"
let zhd = 'Hello' + name + ',' + 'How are you' + good + '?'
console.log(zhd);
模板字符对象串嵌套
// 字符串中嵌入变量
let name = "浩东"
let good = "today"
let zhd = `Hello ${
name}, How are you ${
good}?`
console.log(zhd);
普通表达式嵌套
var a = 5;
var b = 10;
console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
// "Fifteen is 15 and
// not 20."
模板字符串表达式嵌套
var a = 5;
var b = 10;
console.log(`Fifteen is ${
a + b} and not ${
2 * a + b}.`);
// "Fifteen is 15 and
// not 20."
可以看到Es6模板字符串的嵌套不仅更加的简单,而且逗号显示也更加的清晰。普通的嵌套更容易出错。而且模板字符串还有一个更大的优点,那就是嵌套里面还能嵌套。
模板字符串多重嵌套
const tmpl = addrs => ` <table> ${
addrs.map(addr => ` <tr><td>${
addr.first}</td></tr> <tr><td>${
addr.last}</td></tr> `).join('')}
</table>
`;
//调用
const data = [
{
first: '<Jane>', last: 'Bond' },
{
first: 'Lars', last: '<Croft>' },
];
console.log(tmpl(data));
// <table>
//
// <tr><td><Jane></td></tr>
// <tr><td>Bond</td></tr>
//
// <tr><td>Lars</td></tr>
// <tr><td><Croft></td></tr>
//
// </table>
三、更多特点
1、模板字符串调用函数
<script>
function gettime() {
var myDate = new Date;
var year = myDate.getFullYear(); //获取当前年
var mon = myDate.getMonth() + 1; //获取当前月
var date = myDate.getDate(); //获取当前日
var week = myDate.getDay();
var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
return year + "年" + mon + "月" + date + "日" + weeks[week]
}
let a = `<p>${
gettime()}</p>`
console.log(a);
</script>
四、封装一个模板字符串
目的
实现将字符串’我是{
{name}},职业{
{job}},工资{
{salary}}’里的占位符用变量代替。
思想
1、定义一个模板字符串正则/{
{(\w+)}}/,匹配字符串中{
{}}的内容,然后通过if判断模板里是否有字符串模板。
2、如果有,那么就查找模板里的第一个模板字符串字段,并将其渲染,用相应的值替代,并通过render函数递归的渲染返回渲染后的结构。
3、如果没有,那么直接返回模板字符串。
代码
function render(template, data) {
const reg = /\{\{(\w+)\}\}/;
if (reg.test(template)) {
const name = reg.exec(template)[1];
template = template.replace(reg, data[name]);
return render(template, data);
}
return template;
}
let template = '我是{
{name}},职业{
{job}},工资{
{salary}}';
let person = {
name: '阿巴', job: '前端', salary:30000};
console.log(render(template, person)); // 我是阿巴,职业前端,工资30000
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/171833.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...