前言

es的模板字符，也就是定义了块的概念。

模板字符的二个条件:

1.必须在``中,这个`不是单引号而是反单引号，是tab的上面一个。

2.在#{}中，这个就有点意思了，里面不像后台的块级，在这里不可以去命名，只能是一个输出块，可以理解为一行语句 retrun {此处是要编译的代码}。

正文

来感受一下:

<script>

	  //调用了map方法，返回一个数组，后调用join将数组内的item用空字符连接起来，然后构成了一个字符串  //对<>进行转义   //对<>进行转义

	const temp1 = addrs => `

	  <table>

	  ${addrs.map(addr=>`<tr><td>

	  ${zhuanyi(addr.first)}</td><td>

	  ${zhuanyi(addr.last)}</td></tr>`

	 ).join('')

	}

	</table>`

	//一个json数组

	const data = [{

		first: '<Jame>',

		last: 'Bond'

	}, {

		first: 'Lars',

		last: '<Croft>'

	}];

	// 转义方法

	function zhuanyi(str) {

		let newstr = "";

		for (var i in str) {

			if (str[i] == "<") {

				newstr += "&lt;";

				continue;

			}

			else if(str[i] == ">") {

				newstr += "&gt;";

				continue;

			}

			newstr += str[i];

		}

		return newstr;

	};

	// 将生成的table加入到tableinsert中

	$(function () {

		$('#tableinsert').append($(temp1(data)));

	});

</script>

</head>

<body>

<div id="tableinsert"></div>

</body>

上述中我使用了``，在内部我可以随意使用${} 进行字符串的嵌入。

效果:

js es6 模板字符的更多相关文章

  1. js ES6 对字符的操作注意事项

    1.codePointAt方法是测试一个字符由两个字节还是由四个字节组成的最简单方法. function is32Bit(c) { return c.codePointAt(0) > 0xFFF ...

  2. es6 学习2 模板字符

    es6模板字符简直是开发者的福音啊,解决了ES5在字符串功能上的痛点. 1.第一个用途,基本的字符串格式化.将表达式嵌入字符串中进行拼接.用${}来界定 //es5 var name = 'lux' ...

  3. ES6模板字面量

    前面的话 JS 的字符串相对其他语言来说功能总是有限的,事实上,ES5中一直缺乏许多特性,如多行字符串.字符串格式化.HTML转义等.ES6通过模板字面量的方式进行了填补,模板字面量试着跳出自己JS已 ...

  4. es6 模板字变量和字符串占位符

    开发者一直在寻找一种创建多行字符串的形式,但要使用单引号双引号字符串一定要在同一行才行. 老办法: 还有其他办法,虽然能实现,但是太啰嗦 es6模板自变量 使用反撇好(`)替换了单双引号 反撇好中的所 ...

  5. vue 事件监听和es6模板语法

    es6模板语法的反引号是通过左上角的飘字符弄出来了,学废了吗?

  6. js使用模板快速填充数据

    1.html <!DOCTYPE html> <html> <head> <title>模板标签</title> </head> ...

  7. JS之模板技术（aui / artTemplate）

    artTemplate是个好东西啊,一个开源的js前端模板引擎,使用简单,渲染效率特别的高. 我经常使用这个技术来在前端动态生成新闻列表,排行榜,历史记录等需要在前端列表显示的信息. 下面是artTe ...

  8. js正则表达式验证字符长度

    原理,就是把一个汉字替换为两个字母,来实现长度验证. //js正则验证字符长度 第一种:直接输出长度 alert('1sS#符'.replace(/[^\x00-\xff]/g, 'AA').leng ...

  9. 【每天半小时学框架】——React.js的模板语法与组件概念

           [重点提前说:组件化与虚拟DOM是React.js的核心理念!]        先抛出一个论题:在React.js中,JSX语法提倡将 HTML 和 CSS 全都写入到JavaScrip ...

  10. js es6 map 与 原生对象区别

    区别 object和Map存储的都是键值对组合.但是: object的键的类型是 字符串: map的键的类型是 可以是任意类型: 另外注意,object获取键值使用Object.keys(返回数组): ...

随机推荐

  1. JVM解析

    synize锁升级

  2. Failed to instantiate [applets.nature.mapper.LogInfoMapper]: Specified class is an interface-项目启动报错

    一.问题由来 周日下午项目在进行测试时,有些东西需要临时修改,自己已经打好一个包部署到测试服务器进行部署.在测试过程中发现一个问题,就是 现在的代码跑起来是没问题的,只是其他人又的东西还没做,所以暂时 ...

  3. Failed to execute goal on project WebBackend: Could not resolve dependencies for project com.lang.yi:WebBackend:jar:1.0.0

    一.问题由来 自己在搭建项目的时候报一个错误,如标题所示,具体错误信息如下: Failed to execute goal on project WebBackend: Could not resol ...

  4. 协议CAN&报文&仲裁

    简介 物理层 CAN 协议提供了 5 种帧格式来传输数据 数据链路层 中数据帧和遥控帧有标准格式和扩展格式两种,标准格式有 11 位标识符(ID),扩展格式有 29 个标识符(ID)  显性0,隐性1 ...

  5. [VueJsDev] 快速入门 - vscode 设置推荐

    [VueJsDev] 目录列表 https://www.cnblogs.com/pengchenggang/p/17037320.html vscode设置推荐 ::: details 目录 目录 v ...

  6. 简单实用算法——位图算法（BitMap）

    目录 算法原理 优点和缺点 算法实现(C#) 算法应用 参考文章 算法原理 BitMap的基本思想就是用一个bit位来标记某个元素对应的Value,而Key即是该元素.由于采用了Bit为单位来存储数据 ...

  7. Centos挂在U盘的时候无法挂载

    网上的教学视频大部分全是以centos为教材底子--没办法更换系统了,这样方便麻! 我参考的文章: https://blog.csdn.net/shengjie87/article/details/1 ...

  8. 微型跟踪器A产品体验和分析

    跟踪器     这些年随着智能硬件的快速发展,各种新型的智能硬件层出不穷.在一个不起眼的赛道上,跟踪器的赛道一直比较沉寂,在这个一年几千万美金的市场上,玩家是有点少,产品更新不是很快.最近由于项目需要 ...

  9. C++中fopen的句柄返回NULL

    我们在使用fopen打开文件的时候有时会出现失败返回null情况,但是我们不能直接通过log具体是什么原因导致的,所以这时我们可以通过errno和strerror获取错误码和错误信息. 我遇到的是错误 ...

  10. sed第三天

    sed第三天 利用sed 取出ifconfIg ens33命令中本机的IPv4地址 可以百度扩展 了解即可 也可以用别的命令实现 只要有结果也可以 ifconfig ens33 | sed -n 's ...