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(返回数组): ...

随机推荐

Java与sql中的字符串表示
在 Java 中,双引号 "" 用于表示字符串字面量,而单引号 '' 用于表示字符字面量.这意味着在 Java 中,您可以使用双引号来包围包含任意数量字符的字符串,包括零个字符(空 ...
C语言趣味编程之抓交通肇事犯
include <stdio.h> main() { int i, j, k, temp;//i,j,k,分别表示前两位车牌号.后两位车牌号和车牌号,temp为验证是否车牌号为某个数的平方 ...
ANDROID : NEW IDEA
•前言学习了 Android 开发后,小脑袋瓜中时不时会蹦跶出一些想法: 这些想法大都是我现在实现不了的,所以就需要记录一下,等学到相关知识时,在着手解决. •NEW IDEA 1 将一款 APP( ...
[.Net]使用Soa库+Abp搭建微服务项目框架（二）：面向服务体系的介绍
上一章我们建立了一个典型的面向领域设计的Abp小项目,如果按照常规的开发方式,会遇到什么问题呢? 先来完善一下这个小项目,在定义好各实体类后,运行Miguration并向数据库里写入一些初始数据. ...
ADS1299开发调试总结之寄存器使用说明简析
一前记在生物生理信号测量领域,ads12xx系列是一个无法绕过去的存在.笔者最近几个项目围绕着动物生理信号测量来做.所以用ads12xx比较多一些. 中间遇到了一些问题,这里做一个总结吧. 二寄 ...
idea提交时候忽略改动部分文件
之前因为本地开发环境和线上开发环境有区别,bootstrap.xml里的log存放位置在我本地mac不存在路径,我就只能通过修改log路径才能让项目跑起来.但是,本地修改的东西每次commit时候都显 ...
UE干货| UE虚幻引擎调试神器—控件反射器
一.打开控件反射器可以通过窗口→开发者工具→控件反射器打开: 也可以在umg编辑器上方控件反射器打开. 二.UE控件反射器使用方法运行项目后,点击控件反射器的"选择可测试命中控件&qu ...
C++ memcpy、memmove
函数原型: void *memcpy(void *dest, const void* src, size_t count ); void *memmove(void *dest, const void ...

js es6 模板字符

前言

正文

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

随机推荐

热门专题