js es6 模板字符

前言

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 模板字符的更多相关文章

js ES6 对字符的操作注意事项
1.codePointAt方法是测试一个字符由两个字节还是由四个字节组成的最简单方法. function is32Bit(c) { return c.codePointAt(0) > 0xFFF ...
es6 学习2 模板字符
es6模板字符简直是开发者的福音啊,解决了ES5在字符串功能上的痛点. 1.第一个用途,基本的字符串格式化.将表达式嵌入字符串中进行拼接.用${}来界定 //es5 var name = 'lux' ...
ES6模板字面量
前面的话 JS 的字符串相对其他语言来说功能总是有限的,事实上,ES5中一直缺乏许多特性,如多行字符串.字符串格式化.HTML转义等.ES6通过模板字面量的方式进行了填补,模板字面量试着跳出自己JS已 ...
es6 模板字变量和字符串占位符
开发者一直在寻找一种创建多行字符串的形式,但要使用单引号双引号字符串一定要在同一行才行. 老办法: 还有其他办法,虽然能实现,但是太啰嗦 es6模板自变量使用反撇好(`)替换了单双引号反撇好中的所 ...
vue 事件监听和es6模板语法
es6模板语法的反引号是通过左上角的飘字符弄出来了,学废了吗?
js使用模板快速填充数据
1.html <!DOCTYPE html> <html> <head> <title>模板标签</title> </head> ...
JS之模板技术（aui / artTemplate）
artTemplate是个好东西啊,一个开源的js前端模板引擎,使用简单,渲染效率特别的高. 我经常使用这个技术来在前端动态生成新闻列表,排行榜,历史记录等需要在前端列表显示的信息. 下面是artTe ...
js正则表达式验证字符长度
原理,就是把一个汉字替换为两个字母,来实现长度验证. //js正则验证字符长度第一种:直接输出长度 alert('1sS#符'.replace(/[^\x00-\xff]/g, 'AA').leng ...
【每天半小时学框架】——React.js的模板语法与组件概念
[重点提前说:组件化与虚拟DOM是React.js的核心理念!] 先抛出一个论题:在React.js中,JSX语法提倡将 HTML 和 CSS 全都写入到JavaScrip ...
js es6 map 与原生对象区别
区别 object和Map存储的都是键值对组合.但是: object的键的类型是字符串: map的键的类型是可以是任意类型: 另外注意,object获取键值使用Object.keys(返回数组): ...

随机推荐

【架构师视角系列】QConfig配置中心系列之Server端（三）
声明原创文章,转载请标注.https://www.cnblogs.com/boycelee/p/17993697 <码头工人的一千零一夜>是一位专注于技术干货分享的博主,追随博主的文章, ...
WAF和IPS的区别
简介 Web应用防火墙WAF(Web Application Firewall)和入侵防御系统IPS(Intrusion Prevention System)是网络安全领域中常见的两种安全解决方案,它 ...
对象遍历 Object.keys(obj).forEach(name=> {})
Object.keys(props).forEach(name => { watch[name] = function (value) { this.columnConfig.update(na ...
etcd每个节点都存储了完整的键值对数据集，为什么扩容etcd集群仍可分散存储压力？
etcd每个节点都存储了完整的键值对数据集,这主要是为了确保数据的一致性和高可用性.在这种设计下,任何一个节点都可以处理读取请求,并在本地提供数据,从而无需跨节点通信.这种冗余的数据存储方式也增加了系 ...
基于stm32H730的解决方案开发之SD卡的读写调试
一概述在嵌入式小系统领域,SD卡存储是一个非常重要的功能.可从难度上,它又是非常难的.因为它涉及到两个大的功能点,一个是文件系统,这个难度非一般.另外一个是sd卡的底层驱动.涉及到的接口多,所以也 ...
基于BES2300芯片的开源DSP开发平台简述
一什么是开源DSP平台所谓的开源DSP平台,就是软硬件全部开发接口,开发者可以在上面做DSP算法验证和算法开发.基于目前科研机构缺少开源的微型数字信号处理的情况,我们把bes2300的代码做了优化 ...
sqlplus清屏方法
cmd中使用:host cls 或 clear screen或 clear scre或clea scr
centos如何换源
centos如何换源? 万事先备份 mkdir -p /etc/yum/backup/ cp -r /etc/yum.repos.d/* /etc/yum/backup/ 1.将源文件备份 cd /e ...
uni-app 地图全解析+事件监听
最近找到了一篇uni-app的地图解决方案精品文章,这里分享给大家,希望对大家有所帮助转载地址:https://blog.csdn.net/cplvfx/article/details/111447 ...

js es6 模板字符

前言

正文

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

随机推荐

热门专题