ES6模板字符串和标签模板的应用实例分析

本文实例讲述了ES6模板字符串和标签模板的应用。分享给大家供大家参考，具体如下：

ES6 中对字符串进行了扩展，而模板字符串就是一个非常实用的方式，可以在html中实现与变量和方法的混编

之前我们手动拼接字符串的方式

let hello = 'Hello';
let html = '<div>' +
 '<span>'+ hello +'</span>' +
 '</div>';
console.log(html); // <div><span>Hello</span></div>

ES6中使用模板字符串来优化了拼接的方式

let name = 'Joh';
let qq = '56655';
function log() {
 return 'Hi there!';
}
let html = `
 <div>
  <ul>
    <li>${ name === 'Joh' ? 'is Joh' : 'not Joh'}</li>
    <li>${qq}</li>
    <li>${log()}</li>
  <ul>
 </div>
`
console.log(html);
/*
// 输出如下html:
<div>
  <ul>
    <li>is Joh</li>
    <li>56655</li>
    <li>Hi there!</li>
  <ul>
</div>
*/

可以看出模板字符串优化了之前拼接字符串的方式，更方便于编程

关于标签模板

未经处理的标签函数与模板字符串的结合，导致模板字符串失效

function tag() {
 return 'tag';
}
let name = "Joh";
var res = tag`hello ${name}`;
console.log(res); // tag

标签函数对模板字符串进行处理, 安全编码的示例：

function safe(strArr) {
 let res = '';
 console.log(arguments);
 for(var i=0, len = strArr.length; i < len; i++) {
  res += strArr[i].replace(/</g, '<').replace(/>/g, '>');
  if(i < arguments.length -1) {
   res += arguments[i + 1];
  }
 }
 return res;
}
let name = 'Joh';
var result = safe`<p>hello ${name}</p>`;
console.log(result); // &ltp>hello Joh&lt/p>

更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • ES6字符串模板，剩余参数，默认参数功能与用法示例

    ES6字符串模板，剩余参数，默认参数功能与用法示例

    本文实例讲述了ES6字符串模板,剩余参数,默认参数功能与用法.分享给大家供大家参考,具体如下: 这里介绍一下字符串模板以及剩余参数,默认参数的概念以及使用. 先来说说字符串模板. 字符串模板 ES6中允许使用反引号 ` 来创建字符串,此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${varible}.如果你使用过像C#等后端强类型语言的话,对此功能应该不会陌生. //产生一个随机数 var num=Math.random(); //将这个数字输出到console console.l

  • ES6学习教程之模板字符串详解

    模板字符串(template strings) ES6 中引进的一种新型的字符串字面量语法 - 模板字符串.书面上来解释,模板字符串是一种能在字符串文本中内嵌表示式的字符串字面量.简单来讲,就是增加了变量功能的字符串. ES6为我们提供了模板字符串,语法使用反引号`.模板字符串具有以下三个优点: 多行文本 字符串中插入变量 字符串中插入表达式 基本语法 模板字符串和 ES5的字符串的声明一样. // ES5 var name = 'xixi'; console.log(name);// xixi

  • ES6(ECMAScript 6)新特性之模板字符串用法分析

    本文实例讲述了ES6(ECMAScript 6)新特性之模板字符串用法.分享给大家供大家参考,具体如下: ES6引入了一种新型的字符串字面量语法,我们称之为模板字符串(template strings).除了使用反撇号字符 ` 代替普通字符串的引号 ' 或 " 外,它们看起来与普通字符串并无二致.在最简单的情况下,它们与普通字符串的表现一致: context.fillText(`Ceci n'est pas une cha?ne.`, x, y); 但我们不能说:"原来只是被反撇号括起

  • 浅谈ES6 模板字符串的具体使用方法

    写在前面 关于 ES6, 也终于在 2015 年的 7 月 18 号尘埃落定了.虽然说各大浏览器还没有全面的支持,不过这并不妨碍我们一颗想要撸一把的心.在后端,可以使用 Node.js(0.12+)或 io.js, 前端的话,也可以使用Babel 或Traceur 进行语法预转义成 ES5使用 . 关于该系列(不知道能不能成为一个系列,总是各种懒),会没有规律的挑选一些内容来学习.欢迎大家积极纠错,留言探讨. 模板字符串(template strings) 用法 // 普通字符串 `In Jav

  • ES6中字符串string常用的新增方法小结

    本文实例讲述了ES6中字符串string常用的新增方法.分享给大家供大家参考,具体如下: ES6为js新增了很多方法,包括遍历.查询.替换等等,可以很简洁的替换ES5中的类似方法,本文不考虑codePointAt等不常用方法. for-of: let str="wbiokr"; for(let s of str){ console.log(s) } //结果:w, b, i, o, k, r 由于es5并没有为js制定字符串相关遍历方法,for-of无疑会是接下来前端开发中的一个很重要

  • ES6新特性之字符串的扩展实例分析

    本文实例讲述了ES6新特性之字符串的扩展.分享给大家供大家参考,具体如下: 一.ES5字符串函数 concat: 将两个或多个字符的文本组合起来,返回一个新的字符串. indexOf: 返回字符串中一个子串第一处出现的索引(从左到右搜索).如果没有匹配项,返回 -1 . charAt: 返回指定位置的字符. lastIndexOf: 返回字符串中一个子串最后一处出现的索引(从右到左搜索),如果没有匹配项,返回 -1 . match: 检查一个字符串匹配一个正则表达式内容,如果么有匹配返回 nul

  • 详解JavaScript ES6中的模板字符串

    在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用反引号 (`) 表示,它们看上去和普通的字符串没有什么区别.在最简单的情况下,他们就是普通的字符串: context.fillText(`Ceci n'est pas une cha?ne.`, x, y); context.fillText(`Ceci n'est pas une cha?ne.`, x, y); 之所以被称为模板字符串,是因为模板字符串为 JS 引入了简单的字符串插值特性,也就是说,可以方便优雅地将 JS 的值

  • 深入浅出es6模板字符串

    深入浅出es6模板字符串

    本文主要介绍了深入浅出es6模板字符串,分享给大家,具体如下 作为前端开发者避免不了根据后台数据的返回,组装html,渲染页面.举个栗子 $('#result').append( 'There are <b>' + basket.count + '</b> ' + 'items in your basket, ' + '<em>' + basket.onSale + '</em> are on sale!' ); 有时候还要给标签加一些属性,写起来很不方便,

  • ES6新特征数字、数组、字符串

    一.let和const let:声明变量,只在声明的块级作用域(大括号)内起作用［注意:let不向var那样可以自动提升］ 如果一个区块内存在let或const命令,该区块就被解析成封闭作用域(暂时性死区,必须先声明再使用) ［所以一个区块内只要有let,就可能存在死区,就可能会出现变量声明使用顺序的错误］ let为JavaScript增加了块级作用域 ES6中在块级作用域声明的函数不能在外部被引用,但在ES5中可以(ES5中的函数声明可以提升到全局作用域或函数作用域头部,ES6中不行,但是ES

  • ES6模板字符串和标签模板的应用实例分析

    本文实例讲述了ES6模板字符串和标签模板的应用.分享给大家供大家参考,具体如下: ES6 中对字符串进行了扩展,而模板字符串就是一个非常实用的方式,可以在html中实现与变量和方法的混编 之前我们手动拼接字符串的方式 let hello = 'Hello'; let html = '<div>' + '<span>'+ hello +'</span>' + '</div>'; console.log(html); // <div><span

  • JS实现字符串转日期并比较大小实例分析

    本文实例分析了JS实现字符串转日期并比较大小的方法.分享给大家供大家参考,具体如下: 方法1: function compareDate(DateOne, DateTwo) { var OneMonth = DateOne.substring(5, DateOne.lastIndexOf("-")); var OneDay = DateOne.substring(DateOne.length, DateOne.lastIndexOf("-") + 1); var O

  • ES6解构赋值的功能与用途实例分析

    本文实例讲述了ES6解构赋值的功能与用途.分享给大家供大家参考,具体如下: (1)交换变量的值 [x, y] = [y, x]; 上面代码交换变量x和y的值,这样的写法不仅简洁,而且易读,语义非常清晰. (2)从函数返回多个值 函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回.有了解构赋值,取出这些值就非常方便. // 返回一个数组 function example() { return [1, 2, 3]; } var [a, b, c] = example(); // 返

  • JSP自定义标签rtexprvalue属性用法实例分析

    本文实例讲述了JSP自定义标签rtexprvalue属性.分享给大家供大家参考.具体如下: 其实以前也有写过自定义标签, 但是没有注意到过<rtexprvalue>的用法, 最近这几天又用上自定义标签了, 突然发现<rtexprvalue>的用法是有讲究的. rtexprvalue的全称是 Run-time Expression Value, 它用于表示是否可以使用JSP表达式. 当在<attribute>标签里指定<rtexprvalue>true<

  • php常用字符串查找函数strstr()与strpos()实例分析

    本文实例讲述了php常用字符串查找函数strstr()与strpos().分享给大家供大家参考,具体如下: string strstr ( string $haystack , mixed $needle [, bool $before_needle = false ] ) 1.$haystack被查找的字符串,$needle要查找的内容 2.如查找到则返回字符串的一部分,如没找到则返回FALSE 3.该函数区分大小写,如果想要不区分大小写,请使用 stristr() 4.如果你仅仅想确定nee

  • ES6学习笔记之let与const用法实例分析

    本文实例讲述了ES6学习笔记之let与const用法.分享给大家供大家参考,具体如下: 在ES6中不是var,而是通过let来声明变量,用const来声明常量,有如下一些不同: 1.let与const作用域只限于当前代码块{},而var则没有这种限制. 2.使用let.const申明的变量作用域不会被提升.例如: console.log(str); var str="var declare"; 控制台输出undefined:因为变量申明是在任意代码执行前处理的,在代码区中任意地方声明变

  • es6中Promise 对象基本功能与用法实例分析

    本文实例讲述了es6中Promise 对象基本功能与用法.分享给大家供大家参考,具体如下: Promise 是异步编程的一种解决方案,解决--回调函数和事件 ES6 规定,Promise对象是一个构造函数,用来生成Promise实例. 下面代码创造了一个Promise实例. 基本用法 ES6 规定,Promise对象是一个构造函数,用来生成Promise实例. const promise = new Promise(function(resolve, reject) { //resolve (d

  • ES6使用 Array.includes 处理多重条件用法实例分析

    本文实例讲述了ES6使用 Array.includes 处理多重条件用法.分享给大家供大家参考,具体如下: includes   [ɪnk'lu:dz]  包含,包括 includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false. 举个例子: // 条件语句 function test(fruit) { if (fruit == 'apple' || fruit == 'strawberry') { console.log('red'); } } 乍一看,

  • es6数组的flat()，flatMap()函数用法实例分析

    本文实例讲述了es6数组的flat(),flatMap()函数用法.分享给大家供大家参考,具体如下: 数组的成员有时还是数组,Array.prototype.flat()用于将嵌套的数组"拉平",变成一维数组.该方法返回一个新数组,对原数据没有影响. [1, 2, [3, 4]].flat() // [1, 2, 3, 4] 上面代码中,原数组的成员里面有一个数组,flat()方法将子数组的成员取出来,添加在原来的位置. flat()默认只会"拉平"一层,如果想要&

随机推荐