ES6系列_5之字符串模版

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));

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

未完,待续。。。。

原文地址:https://www.cnblogs.com/bfwbfw/p/10052391.html

时间: 2024-10-31 20:11:54

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

ES6系列_5之数字操作

下面是针对ES6新增的一些数字操作方法进行简单梳理. 1.数字判断和转换 (1)数字验证Number.isFinite( xx ) 使用Number.isFinite( )来进行数字验证,只要是数字,不论是浮点型还是整形都会返回true,其他时候会返回false. let a= 11; let b=11.0 console.log(Number.isFinite(a));//true console.log(Number.isFinite(b));//true console.log(Numbe

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

字符串模版 这节我们主要学习ES6对字符串新增的操作,最重要的就是字符串模版,字符串模版的出现让我们再也不用拼接变量了,而且支持在模板里有简单计算操作.小伙伴们是不是已经摩拳擦掌等不急了那?那我们就开始吧. 先来看一个在ES5下我们的字符串拼接案例: let xzdemo='小智'; let blog = '非常高兴你能看到这篇文章,我是你的朋友'+xzdemo+'.这节课我们学习字符串模版.'; document.write(blog); ES5下必须用+ xzdemo +这样的形式进行拼接,

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

接着上文[js高手之路] es6系列教程 - 迭代器与生成器详解继续. 在es6中引入了一个新的循环结构for ....of, 主要是用来循环可迭代的对象,那么什么是可迭代的对象呢? 可迭代的对象一般都有Symbol.iterator属性,你可以在控制台中用console.dir打印数组,Map,Set,在他们的原型对象(prototype)上面就能找到.这个属性与迭代器密切相关,通过该函数可以返回一个迭代器,下文,我会举一个例子.一般来说所有的集合对象(数组,Set,Map 以及字符串)都是可

[ES6系列-04]再也不乱“哇”了:用 let 与 const 替代 var

[原创]码路工人 Coder-Power 大家好,这里是码路工人有力量,我是码路工人,你们是力量. github-pages 博客园cnblogs 今天的内容是,关于 JavaScript 中定义变量的变化(其实不确切,函数,常量表示被冷落). 首先,回顾下 var 定义存在的问题 1. 哇..var 好乱.. 1.1 可以重复定义 /* eg.0 * multi-definition of var-variable */ //----------------------------------

ES6 系列之异步处理实战

前言 我们以查找指定目录下的最大文件为例,感受从 回调函数 -> Promise -> Generator -> Async 异步处理方式的改变. API 介绍 为了实现这个功能,我们需要用到几个 Nodejs 的 API,所以我们来简单介绍一下. fs.readdir readdir 方法用于读取目录,返回一个包含文件和目录的数组. fs.stat stat 方法的参数是一个文件或目录,它产生一个对象,该对象包含了该文件或目录的具体信息.此外,该对象还有一个 isFile() 方法可以

shell编程系列4--有类型变量:字符串、只读类型、整数、数组

shell编程系列4--有类型变量:字符串.只读类型.整数.数组 有类型变量总结: declare命令和typeset命令两者等价 declare.typeset命令都是用来定义变量类型的 declare命令参数总结 1.declare -r 将变量设置为只读类型 declare -r var="hello" var="world" # 变量默认可以修改 [[email protected] shell]# var2="hello world"

深入解析 ES6 系列(一)

简介 欢迎来到深度探索 ES6!在这个新的周系列里,我们将探索 ECMAScript 6.这是一种 JavaScript 语言即将到来的新版本.ES6 包含了很多新的语言功能,且这些语言功能使得 JS 更加强大更富有表现力.在接下来的几周时间里,我们将会一个一个地了解这些新功能.但是在我们了解细节的东西之前,我们值得花一点时间来讨论一下什么是 ES6 以及你期望能得到什么. ECMAScript 的范围是什么? JavaScript 编程语言是由 ECMAScript 名下的 ECMA 进行标准

ES6学习笔记(二)——字符串扩展

相信很多人也和我一样,不喜欢这样循规蹈矩的逐条去学习语法,很枯燥乏味.主要是这样学完一遍之后,没过一段时间就忘到九霄云外了.不如实际用到的时候研究它记得牢靠,所以我就整理成笔记,加深记忆的同时便于复习查看. 在这样不断的学习过程中,也提高了自己的总结能力:) 1.字符串的遍历器接口 ES5,数组和对象可以进行遍历,使用for() 和 for...in,还有jq中的each()方法进行遍历. ES6为我们提供了字符串遍历器  for...of 循环遍历 优点:可以识别大于0xFFFF的码点,传统的

noip推荐系列:遥控车[字符串+高精+二分答案]

[问题描述] 平平带着韵韵来到了游乐园,看到了n辆漂亮的遥控车,每辆车上都有一个唯一的名字name[i].韵韵早就迫不及待地想玩名字是s的遥控车.可是韵韵毕竟还小,她想象的名字可能是一辆车名字的前缀(也就是说能确定一个i,使s是name[i]的前缀),这时她就能玩第i辆车:或者是一个无中生有的名字,即s不是任何一辆车名字的前缀,这时候她什么也不能玩.你需要完成下面的任务: 1.韵韵想了m个她想要的名字,请告诉她能玩多少次. 2.由于管理员粗心的操作,导致每辆车的摆放位置都可能出现微小的差错,原来