es6 模板字符串_es6 方法模板渲染

es6 模板字符串_es6 方法模板渲染前言ES6(ES2015)为JavaScript引入了许多新特性,其中与字符串处理相关的一个新特性——模板字面量,提供了多行字符串、字符串模板的功能,相信很多人已经在使用了。字符串模板的基本使用很简单,今天就带大家来了解了解模板字符串。一、基本使用1、传统字符串传统做法需要使用大量的“”(双引号)和+来拼接才能得到我们需要的模版。但是这样是十分不方便的。并且存下一下几点缺陷:1)传统的字符串拼接不能正常换行2)传统的字符串拼接不能友好的插入变量3)传统的字符串拼接不能友好的处理单引号、双引

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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账号...

(1)


相关推荐

  • 用burpsuite抓包,谷歌 / 火狐浏览器 该怎么设置BurpSuite代理?——超详细教程——CTF Web小白入门基础篇

    用burpsuite抓包,谷歌 / 火狐浏览器 该怎么设置BurpSuite代理?——超详细教程——CTF Web小白入门基础篇以下是我自己操作过的,理一理思路。使用BurpSuite的套路是:浏览器设置BurpSuite代理——>BurpSuite调至on状态——>访问web程序——>进行抓包分析下面以火狐和谷歌两个例子分开讲:一、谷歌:首先burpsuite设置:然后:1.下载插件:chrome://extensions2.(与burp一致)3.可以使用了4.不出意外…

  • idea破解教程2019.3(idea旗舰版如何破解)

    我自己在网上看半天找出来的,主要是破解补丁不知道怎么对应,第一步:下载安装包与破解补丁:安装包:链接:https://pan.baidu.com/s/1Ohy-cp-wrwb1YLelD3DLZA提取码:czdf破解补丁:链接:https://pan.baidu.com/s/1bj2EHJ_BAcfN6IZHQKAh_Q提取码:v3vr第二步:修改idea文件将破解补丁放到…

  • ubuntu16 deb安装jdk11

    ubuntu16 deb安装jdk111.去官网下载jdk注意我们安装的是.deb文件https://www.oracle.com/java/technologies/javase-jdk11-downloads.html下载需要oracle账号2.ubuntu打开直接安装软件或命令行执行sudodpkg-ijdk-11.0.9_linux-x64_bin.deb运行完成后会在目录/usr/lib/jvm下生成jdk文件3配置环境变量sudovi~/.bashrc或者ubuntu桌面直接打开编辑器

  • 免费好用的图片压缩网站,有这五个就够了(收藏备用)

    免费好用的图片压缩网站,有这五个就够了(收藏备用)前言当我们想要线上报名提交照片时,大小却超过范围,这时就需要压缩软件的帮助。但大多主流的软件可以压缩但想要下载就需要收费了,下面是五个国内外免费的压缩平台。一、OnlineImage优点:图片可以压缩90%以上,可以批量压缩,速度只需要几秒钟完全免费,无数量限制,支持绝大多数图片压缩格式缺点:不支持自定义图片大小压缩,广告比较多网站链接为:https://www.onlineimagetool.com/zh/二、Docsmall……

  • icem二维非结构网格划分_Ansys Icem CFD网格划分实例详解PDF及附件[通俗易懂]

    icem二维非结构网格划分_Ansys Icem CFD网格划分实例详解PDF及附件[通俗易懂]网格划分是CFD仿真计算中重要的一环,icem也是Ansys家族的王牌成员,虽然现在已被mesh以及fluentmesh追赶,但是依旧是学生时代主流的追求完美结构化网格的利器!学好icem对于拓结构的理解也会更深刻!这本书没找到原版的,只有影印版,看起来不是很舒服,但是有配套视频可以学习,也算慰藉。建议买本纸质版康康,虽然纸质版也不是很清晰,因为不是彩印的,所以凑活看吧!一、书籍简介名…

  • RAID卡简介[通俗易懂]

    RAID卡简介[通俗易懂]参考资料:https://blog.csdn.net/cymm_liu/article/details/8656154?spm=a2c4e.10696291.0.0.406119a4YLoXPK0、RAID卡简介RAID卡有自己的CPU、CacheMemory,通过集成或借用主板上的SCSI控制器来管理硬盘,可以称之为一个智能化的设备。RAID卡的分…

    2022年10月31日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号