1.字符串模板对比引入:

(1)之前我们也可以使用JavaScript输出模版字符串,通常是下面这样的:

var restult= "姓名: <b>"+person.name+"</b>"

但是我们可以看到:这样的传统做法需要使用大量的“”(双引号)和 + 来拼接才能得到我们需要的模版。但是这样是十分不方便的。

(2)于是ES6中提供了模版字符串,用`(反引号)标识,用${}将变量括起来。上面的例子可以用模版字符串写成下面这样:

·姓名: <b>${person.name}</b>·

这样的做法就简洁了很多,我们不需要再使用大量的""和+来拼接字符串和变量。

注意:如果使用模版字符串表示多行字符串,所有的空格和缩进都会被保存在输出中!!

console.log( `i,
love
you.`);

输出结果为:

2.对运算的支持:

在${}中的大括号里可以放入任意的JavaScript表达式,还可以进行运算,以及引用对象属性。

let a=1;
let b=2;
let result=`${a+b}`;
document.write(result);

输出结果为3。

3.字符串查找

(1)查找是否存在

ES6直接用includes就可以判断,不再返回索引值。

let name="小明";
let listName="小明,小红,小张";
document.write(listName.includes(name))

结果返回:true

(2)判断开头是否存在

listName.startsWith(name)

(3)判断结尾是否存在

listName.endsWith(name)

(4)复制字符串

我们有时候是需要字符串重复的,比如分隔符和特殊符号,这时候复制字符串就派上用场了,语法很简单。

document.write('*'.repeat(20));

结果为:********************。

未完,待续。。。。

ES6系列_5之字符串模版的更多相关文章

  1. ES6系列_5之数字操作

    下面是针对ES6新增的一些数字操作方法进行简单梳理. 1.数字判断和转换 (1)数字验证Number.isFinite( xx ) 使用Number.isFinite( )来进行数字验证,只要是数字, ...

  2. javascript的replace+正则 实现ES6的字符串模版

    采用拼接字符串的形式,将 JSON 数据嵌入 HTML 中.开始时代码量较少,暂时还可以接受.但当页面结构复杂起来后,其弱点开始变得无法忍受起来: 书写不连贯.每写一个变量就要断一下,插入一个 + 和 ...

  3. [js高手之路] es6系列教程 - 迭代器,生成器,for...of,entries,values,keys等详解

    接着上文[js高手之路] es6系列教程 - 迭代器与生成器详解继续. 在es6中引入了一个新的循环结构for ....of, 主要是用来循环可迭代的对象,那么什么是可迭代的对象呢? 可迭代的对象一般 ...

  4. 字符串模版,替代原来Es5的+号拼装字符串

    字符串模版 这节我们主要学习ES6对字符串新增的操作,最重要的就是字符串模版,字符串模版的出现让我们再也不用拼接变量了,而且支持在模板里有简单计算操作.小伙伴们是不是已经摩拳擦掌等不急了那?那我们就开 ...

  5. 大白话,讲编程之《ES6系列连载》汇总

    如果你经历过2,3年前的前端开发,你一定感受过兼容IE6,7的痛苦,一定用过网页三剑客的dreamweaver编写html,面试的时候面试官一定会问你:会用PS切图吗? 刚开始的时候你发现,web前端 ...

  6. 石川es6课程---8、字符串

    石川es6课程---8.字符串 一.总结 一句话总结: · es6字符串新增两个方法:startsWith(以什么开头),endsWith(以什么结尾) · 新增反单引号:可以解析变量,可以折行:le ...

  7. ES6系列之项目中常用的新特性

    ES6系列之项目中常用的新特性 ES6常用特性 平时项目开发中灵活运用ES6+语法可以让开发者减少很多开发时间,提高工作效率.ES6版本提供了很多新的特性,接下来我列举项目中常用的ES6+的特性: l ...

  8. ES6中的模板字符串和新XSS Payload

    ES6中的模板字符串和新XSS Payload 众所周知,在XSS的实战对抗中,由于防守方经常会采用各种各样严格的过滤手段来过滤输入,所以我们使用的XSS Payload也会根据实际情况作出各种各样的 ...

  9. [js高手之路] es6系列教程 - 对象功能扩展详解

    第一:字面量对象的方法,支持缩写形式 //es6之前,这么写 var User = { name : 'ghostwu', showName : function(){ return this.nam ...

随机推荐

  1. 同样是搞Java,年薪15W和50W到底差在哪里?

    同样是搞Java,年薪15W和50W到底差在哪里? 一.总结 一句话总结: 学习 挑战 1.扩宽自己的眼界,学着从全局看待问题,并且勇于挑战别人眼中的难题 2.持续提升你的学习能力,虽然有很多人以「在 ...

  2. JVM虚拟机调优指南

    本章通过阅读JVM垃圾搜集指南文档,整理虚拟机主要配置以及,理解不同的垃圾搜集器. 垃圾搜集算法 引用计数算法 根搜索算法 标记-清除算法 复制算法 标记-整理算法 分代收集算法 搜集算法网上有很多介 ...

  3. UVA-536 Tree Recovery (二叉树遍历)

    题目大意:给出对一棵二叉树先序遍历和中序遍历的顺序,找出后序遍历的顺序. 题目分析:无非就是对字符串的输出顺序做个变化,递归就行了. 代码如下: # include<iostream> # ...

  4. LeetCode 48

    这种方法首先对原数组取其转置矩阵,然后把每行的数字翻转可得到结果,如下所示(其中蓝色数字表示翻转轴): 1  2  3  1  4  7  7  4  1 4  5  6 -->  2  5   ...

  5. 047——VUE中css过渡动作实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Chrome插件(Extensions)开发实践

    内容摘自:http://www.cnblogs.com/mfryf/p/3701801.html

  7. 单链表是否有环的问题解决与讨论(java实现)

    单链表是否有环的问题经常在面试中遇到,一般面试中会要求空间为O(1);再者求若有环,则求环产生时的起始位置. 下面采用java实现. //单链表class ListNode{ int val; Lis ...

  8. itembase协同过滤的详细介绍

    ◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:https://www.cnblogs.com/by-dream/p/9016289.html 前言 通常我们在网购的时候会遇到这 ...

  9. 【转】 linux的网络接口之扫盲

    [转] linux的网络接口之扫盲 转自:http://blog.csdn.net/zhangxinrun/article/details/6820433 (1)网络接口的命名 这里并不存在一定的命名 ...

  10. Life Cycle(JSF+Facelets)

    一.JSF Life Cycle: 图1 图2 应用程序的生命周期是指应用程序的各个阶段,从开始到结束.所有应用程序的生命周期.在web应用程序生命周期中,执行常见任务,包括以下内容.■处理传入的请求 ...