美文网首页
字符串模板-ES6初学习2

字符串模板-ES6初学习2

作者: 程咸菜 | 来源:发表于2017-01-17 17:49 被阅读0次

字符串模板

字符串模板

反引号 ``

反引号的位置在 tab 键的上方,在英文输入下就能打出来了。在出现 `` 之前如果出现下面的例子我们想在字符串内折行的话是没法做折行的。只能用 + 做拼接的方式。

let str = 'aaa bbb ccc ddd eee fff';        
console.log(str);//输出 aaa bbb ccc ddd eee fff       
let str = 'aaa bbb ccc      
 ddd eee fff';       
console.log(str);//报错了 不可以折行,折行的话只能字符串拼接如下      
let str = 'aaa bbb ccc'+      
 'ddd eee fff';               
console.log(str);//输出 aaa bbb ccc ddd eee fff          

使用字符串模板的话就是这么写

let str = `aaa bbb ccc ddd eee fff`;        
console.log(str);//输出 aaa bbb ccc ddd eee fff       
let str2 = `aaa bbb ccc      
 ddd eee fff`;       
console.log(str);//不会报错,和上面的一样显示        

模板占位符 ${}

模板占位符就是说的用 ${} 来替换一些字符串。比如

let str = 'hello';      
str = str + 'world';//以前的办法就是用+ 号做链接符号。       
console.log(str);       

现在可以用 ${} 来代替。

let str2 = 'hello';      
str2 = `${str2} world`;      
console.log(str2);          

模板占位符支持一些简单的加减乘除以及三目运算规则。比如
let str = `${1+1-4}`;      
console.log(str); 

console.log(' '); 


let obj = `${2>4?2:1}`;     
console.log(obj);        

字符串的方法

includes(), startsWith(), endsWith()

传统上,JavaScript只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6又提供了三种新方法。

  • includes():返回布尔值,表示是否找到了参数字符串。
  • startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。
  • endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部。

看下面的代码示例

var str = 'hello world';     
str.includes(world);      
str.startsWith(hel);    
str.endsWith(ld!);      
console.log(str.includes('world'));   
console.log(str.startsWith('hel'));     
console.log(str.endsWith('ld!'));      

由于 hello world 后面没有 所以报错了。

repeat()

repeat 方法返回一个新字符串,表示将原字符串重复n次。

var a = 'xiancai'.repeat(2);   
console.log(a);// "xiancaixiancai"      
var b = 'xiancai'.repeat(0);   
console.log(b);// ""返回空      

如果是小数的话会取整
var a = 'xo'.repeat(3.9);   
console.log(a);//"xoxoxo"     

负数只会对 -1 和 0 之间的负数不会报错,小于 -1 的负数都会报错。

padStart(),padEnd()

这两个起到补全长度的作用。 padStart() 补全开始的长度, padEnd() 补全结束的长度。
padStartpadEnd 一共接受两个参数,第一个参数用来指定字符串的最小长度,第二个参数是用来补全的字符串。看下面的代码示例

var x = 'xo'
var a = x.padStart(5,'x');
console.log(a);       
var b = x.padEnd(3,'xo');
console.log(b);  

有错误,但是错误未知,不知道是不是浏览器的问题。回头了再找找问题出在什么地方。

相关文章

  • ES6模版字符串

    初探ES6:字符串模板 && 标签模板 关键词:``,${} 字符串模板: 在ES6之前我们要在html或者con...

  • ES6学习笔记

    ES6学习笔记之字符串模板 对运算的支持let a=1;let b=2;let result=${a+b};doc...

  • 11.ES6字符串startsWith、endsWith和字符串

    在ES6中字符串扩展了startsWith、endsWith和字符串模板1、startsWith 开始是否包含2、...

  • 21.模板字符串和标签模板字符串

    ES6新增了模板字符串,用于字符串拼接 ES6新增了标签字符串 标签模板字符串执行结果: 函数的第一个参数为数组,...

  • ES6常用新特性

    ES6新特性介绍 模板字符串 模板字符串实现字符串拼接 模板字符串实现多行字符串 结构赋值 对象的解构赋值 数组的...

  • ES6入门之内置对象的扩展

    1.字符串的扩展 模板字符串。ES5写法: ES6写法: 新增字符串方法:1 repeat; //复制字符串2 i...

  • TypeScript字符串新特性

    多行字符串 1. 多行字符串 其中 `` 用来定义 ES6 中的模板字符串,${expr} 用来在模板字符串中嵌...

  • es6、es7常用特性

    1、模板字符串模板字符串 不使用ES6 使用+号降变量拼接喂字符串 例:var name ='My name is...

  • es6学前准备(一)

    ES6优势 1、 对象拷贝2、函数默认参数3、字符串模板 ES6使用频率高: 结构赋值箭头函数set map异步操...

  • ES6入门用法&字符串模板

    字符串模板 传统的JavaScript的输出模板是 ES6引入了模板字符串来解决这个问题 用反引号(`)来标识

网友评论

      本文标题:字符串模板-ES6初学习2

      本文链接:https://www.haomeiwen.com/subject/upambttx.html