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)
blank

相关推荐

  • JavaSE基础(101) 遍历ArrayList集合的4种方式[通俗易懂]

    JavaSE基础(101) 遍历ArrayList集合的4种方式[通俗易懂]ArrayList遍历:取出ArrayList集合中的数据①:for循环②:增强for循环:foreach③:Iterator:迭代器④:ListIterator:双向迭代器ex:/***ArrayList遍历:取出ArrayList集合中的数据*①:for循环*②:增强for循环:foreach*③:Iterator:迭代器*④:…

  • jwt三个组成部分_jwt加密算法

    jwt三个组成部分_jwt加密算法JWT在用户注册或登录后,我们想记录用户的登录状态,或者为用户创建身份认证的凭证。我们不再使用Session认证机制,而使用JsonWebToken认证机制。什么是JWTJsonwebtoken(JWT),是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC7519).该token被设计为紧凑且安全的,特别适用于分布式站点的单点登录(SSO)场景。JWT的…

    2022年10月17日
  • 想自己搭建服务器,永久运行网站?一个 U 盘大小的树莓派就够了!

    想自己搭建服务器,永久运行网站?一个 U 盘大小的树莓派就够了!

    2020年11月13日
  • 报关员计算机知识,报关员的计算机水平要多少[通俗易懂]

    报关员计算机知识,报关员的计算机水平要多少[通俗易懂]baijuantie新兵答主12-12TA获得超过3110个赞什么是报关员报关员(Customsbroker)又称企业海关经纪人、企业报关人员。报关员是指代表所属企业/单位向海关办理进出口货物报关纳税、在海关备案登记等通关手续的人员。报关员不是自由职业者,只能受雇于一个依法向海关注册登记的进出口货物收发货人或者企业,并代表该企业向海关办理业务。报关员的主要工作内容1.按照海关及规定要求在报关期限…

  • Linux /etc/vimrc 简洁配置

    Linux /etc/vimrc 简洁配置首先进入配置文件vim/etc/vimrc然后在末尾加上以下代码即可:syntaxon”自动语法高亮setnumber”显示行号setautoindent”自动对齐setsmartindent”智能对齐setcursorli…

  • set/getenforce

    set/getenforce在AndroidKK4.4版本后,Google启用SELinux来增强Android的安全性。可以使用setenforce命令进行设置模式:adbshellsetenforce0//设置成Permissive模式adbshellsetenforce0//设置成Permissive模式adbshellsetenforce1//设置成Enforc

发表回复

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

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