ES6 字符串扩展 字符串模板

1.字符串拼接

先来看一个在ES5下我们的字符串拼接案例:

let jspang='技术胖';
let blog = '非常高兴你能看到这篇文章,我是你的老朋友'+jspang+'。这节课我们学习字符串模版。';
document.write(blog);

ES5下必须用+jspang+这样的形式进行拼接,这样很麻烦而且很容易出错。ES6新增了字符串模版,可以很好的解决这个问题。字符串模版不再使用‘xxx’这样的单引号,而是换成了xxx这种形式,也叫连接号。这时我们再引用jspang变量就需要用 ${jspang}这种形式了,我们对上边的代码进行改造。

let jspang='技术胖';
let blog = `非常高兴你能看到这篇文章,我是你的老朋友${jspang}。这节课我们学习字符串模版。`;
document.write(blog);

可以看到浏览器出现了和上边代码一样的结果。而且这里边支持html标签,可以试着输入一些。

let jspang='技术胖';
let blog = `<b>非常高兴你能看到这篇文章</b>,我是你的老朋友${jspang}。<br/>这节课我们学习字符串模版。`;
document.write(blog);

对运算的支持:

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

2.字符串的查找

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

  • includes():返回布尔值,表示是否找到了参数字符串。
  • startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
  • endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
// es5的传统写法

let jspang='技术胖';
let blog = '非常高兴你能看到这篇文章,我是你的老朋友技术胖。这节课我们学习字符串模版。';
document.write(blog.indexOf(jspang));

//输出的是20,然后再根据需求自行判断

// es6写法

let jspang='技术胖';
let blog = '非常高兴你能看到这篇文章,我是你的老朋友技术胖。这节课我们学习字符串模版。';
document.write(blog.includes(jspang)); //true

// 这里直接返回的是布尔值,而不是索引值,更直接方便

blog.startsWith(jspang); //判断开头是否有存在
blog.endsWith(jspang); //判断结尾是否存在

3.字符串的复制

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

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

参数如果是小数,会被取整。

'na'.repeat(2.9) // "nana"

如果repeat的参数是负数或者Infinity,会报错。

'na'.repeat(Infinity)
// RangeError
'na'.repeat(-1)
// RangeError

但是,如果参数是 0 到-1 之间的小数,则等同于 0,这是因为会先进行取整运算。0 到-1 之间的小数,取整以后等于-0repeat视同为 0。

'na'.repeat(-0.9) // ""

参数NaN等同于 0。

'na'.repeat(NaN) // ""

如果repeat的参数是字符串,则会先转换成数字。

'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"

 

 

猜你喜欢

转载自blog.csdn.net/weixin_38199437/article/details/87927044