ES6字符串的拓展

最新推荐文章于 2024-08-15 22:39:32 发布

原创最新推荐文章于 2024-08-15 22:39:32 发布 · 187 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ES6字符串的拓展 #模板字符串

es6 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了ES6中引入的字符串新特性，包括遍历器接口、新增的字符串方法如includes、startsWith、endsWith，repeat方法，以及padStart和padEnd补全功能。特别强调了模板字符串的使用，展示了其在多行字符串和变量嵌入方面的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.字符串的遍历器接口;for...of循环遍历

es5

{

let string = "9596zjzmdw";

// for (let i = string.length; i > 0; i--) {

for (let i = 0; len = string.length, i < len; i++) {

console.log(string[i]);

}

}

es6

{

let string = "9596zjzmdw";

for (let value of string) {

console.log(value)

}

}

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

includes() ：返回布尔值，表示是否找到了参数字符串。

startsWith() ：返回布尔值，表示参数字符串是否在原字符串的头部。

endsWith() ：返回布尔值，表示参数字符串是否在原字符串的尾部。

{

let string = "9596zjzmdw";

if (string.includes('zjl')) {

console.log(string.includes('zjl'));

}

else {

console.log(string.includes('zjl'));

}

if (string.startsWith('95')) {

console.log(string.startsWith('95'));

}

else {

console.log(string.startsWith('95'));

}

if (string.endsWith('dw')) {

console.log(string.endsWith('dw'));

}

else {

console.log(string.endsWith('dw'));

}

}

es5

indexOf();方法用于确定一个字符串在另一个字符串中第一次出现的位置，返回结果是匹配开始的位置。如果返回-1，就表示不匹配。

lastIndexOf():lastIndexOf方法的用法跟indexOf方法一致，主要的区别是lastIndexOf从尾部开始匹配，indexOf则是从头部开始匹配。

{

let string = "9596zjzmdw";

if (string.indexOf('969') != -1) {

console.log('找到哦啊了');

}

else {

console.log('不好意思，沒有找到');

}

}

注意这五个方法都支持第二个参数，表示开始搜索的位置。

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

{

let string = "9596zjzmdw";

console.log(string.repeat(2));

// console.log(string.repeat(Infinity)); 报错

// console.log(string.repeat(-1)); 报错

console.log(string.repeat(2.9)); //取整

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

console.log(string.repeat('na'));

console.log(string.repeat('6'));

//0~1取0

console.log(string.repeat(0.9));

}

5.如果某个字符串不够指定长度，会在头部或尾部补全。

padStart()用于头部补全，

padEnd()用于尾部补全。

{

let string = "zjl";

console.log(string.padStart(6, 'zmf')); //zmfzjl

console.log(string.padEnd(6, 'zmf')); //zjlzmf

// 两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串。

console.log(string.padStart(5, 'zmf')); //zmzjl

console.log(string.padStart(6, 'zm')); //zmzzjl

// 如果省略第二个参数，默认使用空格补全长度。

console.log(string.padStart(6));

}

这里有一个例子;时间格式自动补0可以用这个方法

function localDate(datas) {

let Month = String(datas.getMonth() + 1),

Day = String(datas.getDate()),

Hours = String(datas.getHours()),

Minutes = String(datas.getMinutes()),

Y = datas.getFullYear() + '-',

M = Month.padStart(2, '0') + '-',

D = Day.padStart(2, '0') + ' ',

h = Hours.padStart(2, '0') + ':',

m = Minutes.padStart(2, '0');

console.log(Y + M + D + h + m);

}

let nowdata = new Date();

localDate(nowdata);

6.模板字符串这个是一个重点，

传统的 JavaScript 语言，输出模板通常是这样写的（下面使用了 jQuery 的方法）。

$('#result').append(

 'There are <b>' + basket.count + '</b> ' +

 'items in your basket, ' +

 '<em>' + basket.onSale +

 '</em> are on sale!'

 );

es6

 $('#result'.append(`There are <b>${basket.count}</b>
 items in your basket <em>${baskent.onSale}</em>
 are on sale`));

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

console.log(`womenlaiziogaldjfo`);

console.log(`womenlaiziog

aldjfo`); //如果普通的字符串这样使用，会报错

{

let a = 'zjl', b = 'zmf';

console.log(`dwb l ${a} and ${b}`)

}

上面代码中的模板字符串，都是用反引号表示。如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。

console.log(`womenlaizitongyige\`tongyigeshijie\`womendouyouzijidemengxiang`);

如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。

 $('#list').html(`

 <ul>

 <li>first</li>

 <li>second</li>

 </ul>

 `);

上面代码中，所有模板字符串的空格和换行，都是被保留的，比如<ul>标签前面会有一个换行。如果你不想要这个换行，可以使用trim方法消除它。

$('#list').html(`

 <ul>

 <li>first</li>

 <li>second</li>

 </ul>

 `.trim());

大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。

{

let x = 1;

let y = 2;

console.log(`${x} + ${y} = ${x + y}`) // "1 + 2 = 3"

console.log(`${x} + ${y * 2} = ${x + y * 2}`) // "1 + 4 = 5"

} {

let obj = { x: 1, y: 2 };

console.log(`${obj.x + obj.y}`)// "3"

}

模板字符串之中还能调用函数。

function fn() {

return "Hello World";

}

console.log(`foo ${fn()} bar`);// foo Hello World

由于模板字符串的大括号内部，就是执行 JavaScript 代码，因此如果大括号内部是一个字符串，将会原样输出。

console.log(`Hello ${'World'}`) // "Hello World"

模板字符串甚至还能嵌套。

const tmpl = addrs => `

<table>

${addrs.map(addr => `

<tr><td>${addr.first}</td></tr>

<tr><td>${addr.last}</td></tr>

`).join('')}

</table>

`;

上面代码中，模板字符串的变量之中，又嵌入了另一个模板字符串，使用方法如下。

const data = [

{ first: '<Jane>', last: 'Bond' },

{ first: 'Lars', last: '<Croft>' },

];



console.log(tmpl(data));

 <table>

 <tr><td><Jane></td></tr>

<tr><td>Bond</td></tr>

 <tr><td>Lars</td></tr>

<tr><td><Croft></td></tr>

 </table>

实例：模板编译这块暂时跳过;

let template = `

<ul>

<% for(let i=0; i < data.supplies.length; i++) { %>

<li><%= data.supplies[i] %></li>

<% } %>

</ul>

`;

console.log(template)