ES6_字符串模板以及其使用

之前的字符串拼接:

  <script >// 这样拼接的很累let name = "Strive";let age = 18;let str = '这个人叫' + name + ',年龄是' + age + '岁';console.log(str);</script>

现在使用字符串模板:

<script>// 注意:字符串模板中,包裹字符串的符号是Esc下面的 ` ,对于要替换的字符串,使用 ${} 进行替换let name = "Strive";let age = 18;let str = `这个人叫${name},年龄是${age}岁`;console.log(str);
</script>

字符串模板优点:可以随意换行

关于字符串的查找:

之前使用:indexof(),例如:

indexof() 返回的是索引位置,如果没有该str,返回-1

<script >let str = "apple banana pear";console.log(str.indexOf('apple'));if (str.indexOf('apple') !== -1) {alert("有");} else {alert("无");}
</script>

而现在可以使用includes(),例如:

includes() 返回true / false

       <script >let str = "apple banana pear";console.log(str.includes('apple'));</script>

判断字符串以何开头或结尾

开头:startsWith()

<script >let str = "applebananapurper";// console.log(str.startsWith("apple"));console.log(str.startsWith("banana"));
</script>

结尾:endsWith()

<script >//endsWith() 用以判断str是否以某一字符串结尾,注意传入的字符串为正序let str2 = "aggasdhglajsgblahdg;jgfkjhbadlifjas";console.log(str2.endsWith('as'));
</script>

字符串的重复:repeat()

将字符串重复n次输出,输入负数报错,并不会改变原来的str

而且它并不会改变原来str的值,如:

<script >let str = "abcdefa";// 将字符串重复n次输出,输入负数报错,并不会改变原来的strconsole.log(str.repeat(10));console.log(str);
</script>

字符串的填充:padStart() / padEnd()

str.padStart(num,“str2”);
str用str2填充,重复str2,直到str+str2重复n次=num

它并不会改变str的值,如:

<script >let str = "abc";let str2 = str.padStart(10, "你好");console.log(str2);console.log(str);
</script>

关于它的使用:

如果想拼接str1,str2,并且不知道他们的总length,可以使用:

<script >let str = "a";let str2 = "STR";// 将两个字符串拼接在一起(不用就知道length)console.log(str.padStart(str.length + str2.length, str2));
</script>

panEnd()也是如此

ES6_字符串模板以及其使用相关推荐

html模板引擎字符串长度,Web前端模板引擎の字符串模板
这是一个系列文章,将会介绍目前Web前端领域里用到的三种模板引擎技术,它们分别是: 基于字符串的模板基于Dom操作的模板基于虚拟Dom的模板本文是这个系列的第一篇,着重介绍基于字符串的模板引擎的 ...
ES6中新增字符串方法，字符串模板
ES6中新增字符串方法,字符串模板多了两个新方法 startsWith endsWith 返回的是一个Boolean值 let str='git://www.baidu.com/2123123';i ...
ES6 - 字符串模板与新增字符串方法
字符串模板解决痛点:简化字符串拼接,比如innerHTML,url等语法格式:反引号 let name = 'murphy'; let age = 18; console.log(`名字${nam ...
ES6, Angular,React和ABAP中的String Template（字符串模板）
String Template(字符串模板)在很多编程语言和框架中都支持,是一个很有用的特性.本文将Jerry工作中使用到的String Template的特性做一个总结. ES6 阮一峰老师有一个专 ...
ES6（二）——字符串模板、标签模板字符串、函数的默认参数、剩余参数、数组对象的展开语法、数值的表示、Symbol
一.字符串模板基本使用在ES6之前,如果我们想要将字符串和一些动态的变量(标识符)拼接到一起,是非常麻烦和丑陋的(ugly). ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接: 首 ...
vue解构赋值_前端开发es6知识模块化、解构赋值、字符串模板
项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍1.块级作用域 let const 2.箭 ...
vue解决字符串模板@click无效的问题
在同一函数下进行操作 window.clickEvent= this.clickEvent;// 解决字符串模板@click无效的问题 let str=<span class="ul ...
ie模版字符串_字符串模板、模板字符串、Vue中使用template等等。
1:模板字符遇新是直朋能到串传统的一如分算需上来处一定迹面数一跳这件我子作JS语言,输出模板新直能分支调二浏页器朋代说,事刚需求是这样写的: $('#result').append( 'There ...
python 格式化字符串模板字符串（五分钟读懂）
格式化字符串模板字符串在python字符串最核心的功能 # %s 字符串占位符获取传入对象的__str__方法的返回值,并将其格式化到指定位置 # %d 数字整数占位符将整数.浮点数转换成 ...

ES6_字符串模板以及其使用

之前的字符串拼接:

现在使用字符串模板:

字符串模板优点:可以随意换行

关于字符串的查找:

判断字符串以何开头或结尾

字符串的重复:repeat()

字符串的填充:padStart() / padEnd()

ES6_字符串模板以及其使用相关推荐

最新文章

热门文章