ES6模板字符串（循环、函数）

相比ES5的拼接字符串，ES6毫无疑问是简单明了，又清晰可维护。原始的字符串拼接真的是把整个人都拼傻，并且在处理的过程中会出现很多小坑，小问题。

$('#ulList').html(`<ul><li>浙江</li><li>杭州</li></ul>
`);

上面就是用es6的模板字符串``的写法，用反引号（`）标识。如果想拼接变量的话用${ }，还可以嵌套使用，模板字符串中还可以嵌套另一个模板字符串。

$('#ulList').html(`<ul><li>${data.province}</li><li>${data.city}</li></ul>
`);//嵌套模板字符串
const tmpl = addrs => `<table>${addrs.map(addr => `<tr><td>${addr.first}</td></tr><tr><td>${addr.last}</td></tr>`).join('')}</table>
`;

上面的代码就是拼接变量，用${data.province}替换了+ ' data.province ' +

这都很简单，但在项目中的需求有的时候想在字符串拼接里面写入循环啊、函数啊之类的，

首先呢，大括号里支持任何表达式的，可以三目，可以调用函数，同样可以引用对象属性

let x = 1;
let y = 2;`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"let obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"//调用函数
function fn() {return "大连";
}`I come from ${ fn() }`
//I come from 大连

在模板字符串中怎么写循环呢？ES6声明了一个模板编译的说法，该模板使用<%...%>放置 JavaScript 代码，使用<%= ... %>输出 JavaScript 表达式。上代码

let template = `
<ul><% for(let i=0; i < data.supplies.length; i++) { %><li><%= data.supplies[i] %></li><% } %>
</ul>
`;

函数写法

let script =
`(function parse(data){let output = "";function echo(html){output += html;}${ template }return output;
})`;return script;

详解还是要看阮一峰大佬的书，里面有ES6对字符串的详解。我这只是对模板字符串的简单介绍

http://es6.ruanyifeng.com/#docs/string 向大佬学习。

ES6模板字符串（循环、函数）相关推荐

后端字段为null，前端使用ES6模板字符串进行展示
项目需求:后端字段为null,前端使用ES6模板字符串展示为空未处理前效果: // ES6的模板字符串可写表达式<template #default="{ row }"&g ...
[ 前端开发 ] ES6模板字符串
ES6模板字符串模板字符串是 ES6 的新特性,他的作用是减少了字符串的拼接操作,提高了程序的可读性接下来看一个栗子
高级JavaScript #ES6(模板字符串,let,箭头函数,forof,参数增强,解构,class,promise)
模板字符串 1.模板字符串: 只要拼接字符串都用模板字符串代替+a.整个字符串包裹在一对儿反引号 ` ` 中b.反引号``中支持换行 c.反引号中需要动态生成的内容必须放在${}里d. ${}里: ...
ES6（二）——字符串模板、标签模板字符串、函数的默认参数、剩余参数、数组对象的展开语法、数值的表示、Symbol
一.字符串模板基本使用在ES6之前,如果我们想要将字符串和一些动态的变量(标识符)拼接到一起,是非常麻烦和丑陋的(ugly). ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接: 首 ...
es6模板字符串中循环遍历数据踩坑
应该很少有这种需求,需要在模板字符串利循环遍历数据,现在框架都有自己模板语法. 我这里踩的坑是,我在模板字符串中用forEach,map遍历循环时,返回值一直是一个undefined 用for循环re ...
重学ES6 模板字符串
在两三年前,jQuery还是比较主流的开发技术,当我们要为页面添加DOM时,一般,我们是这样写的 $("#container").append('Today is <b> ...
js es6 模板字符串和使用
模板字符串描述: 模板字符串使用反引号 (``) 来代替普通字符串中的用双引号和单引号.模板字符串可以包含特定语法(${expression})的占位符.占位符中的表达式和周围的文本会一起传递给一个默 ...
ES6 模板字符串 ``
参考原文链接 1. 使用JavaScript输出字符串,通常是下面这样的: console.log("He is <b>"+person.name+"< ...
ES6模板字符串【${}配合反单引号一起用】
转自: https://www.cnblogs.com/shihuc/p/10238511.html 先看看JavaScript中两个字符串的效果,就很容易知道模板字符串是个啥东西,其实一点也不新鲜. ...
ES6模板字符串的扩展
1.模板字符串的扩展 1.1传统的Jquery方法 <div class="content"></div><script>let name = ...

ES6模板字符串（循环、函数）

ES6模板字符串（循环、函数）相关推荐

最新文章

热门文章