ES6基础语法之字符串扩展

一、字符串的遍历

js中遍历字符串:


 	var str = "hello,world";
 	for(var i = 0;i<str.length;i++)
 	{
 	     console.log(str[i]);
 	}

ES6扩展的遍历字符串方法:


 	let str = "hello,world";
 	for(let c of str)
 	{
 	     console.log(c);
 	}

二、字符串识别、重复、补全

字符串识别:

ES6 之前判断字符串是否包含子串,用 indexOf 方法,ES6 新增了子串的识别方法。

includes():返回布尔值,判断是否找到参数字符串。

startsWith():返回布尔值,判断参数字符串是否在原字符串的头部。

endsWith():返回布尔值,判断参数字符串是否在原字符串的尾部。

以上三个方法都可以接受两个参数,需要搜索的字符串,和可选的搜索起始位置索引。


 	let str = "jack,rose,mike";
 	console.log(str.includes("rose")); //true
 	console.log(str.includes("rose",5)); //true
 	console.log(str.startsWith("jack")); //true
 	console.log(str.startsWith("rose",5));//true
 	console.log(str.endsWith("mike")) //true
 	console.log(str.endsWith("se",9)) //true(前面9个字符中去查找判断)

字符串重复:

repeat():返回新的字符串,表示将字符串重复指定次数返回


 	let str = "hello,";
 	console.log(str.repeat(3));

字符串补全:

padStart:返回新的字符串,表示用参数字符串从头部(左侧)补全原字符串。

padEnd:返回新的字符串,表示用参数字符串从尾部(右侧)补全原字符串。


 	//使用padStart补全编号
 	let id = 25;
 	console.log((id+"").padStart(6,"0"));

三、模板字符串

模板字符串相当于加强版的字符串,用反引号 `,除了作为普通字符串,还可以用来定义多行字符串,还可以在字

符串中加入变量和表达式。

多行字符串使用:


 	//方案一:普通字符串换行
 	// let str = `I Love JS\nI Love ES`;
 	// console.log(str);
 	 
 	//方案二:多行字符串
 	// let str = `I Love JS
 	// I Love ES`;
 	// console.log(str);

字符串中插入变量:


 	//方案一:JS拼接字符串
 	// var name = "佩奇"; //保存姓名
 	// var hobby = "游戏,运动,看书"; //保存爱好
 	// var obj = document.getElementById("content");
 	// obj.innerHTML = "<h2>大家好,我是"+name+",我的爱好有"+hobby+"</h2>";
 	 
 	//方案二:ES6模板字符串
 	// let name = "佩奇"; //保存姓名
 	// let hobby = "游戏,运动,看书"; //保存爱好
 	// let obj = document.getElementById("content");
 	// obj.innerHTML = `<h2>大家好,我是${name},我的爱好有${hobby}&amp;lt;/h2>`;

 


 	//字符串中嵌入变量
 	// let [name,hobby] = ["jack","抽烟,喝酒,烫头"];
 	// let str = `大家好,我是${name},我喜欢${hobby}`;
 	// console.log(str);

模板字符串的注意点:


 	//(1)如果模板字符串中需要表示反引号,用\转义
 	// let str = `\`hello\``;
 	// console.log(str);
 	 
 	//(2)模板字符串内可以放入表达式
 	// let x = 5;
 	// let y = 6;
 	// let str = `${x}*${y}=${x*y}`;
 	// console.log(str);
 	 
 	//(3)模板字符串中可以调用函数
 	// function fun()
 	// {
 	// return "hello,world!";
 	// }
 	// let str = `测试函数调用:${fun()},调用成功!`;
 	// console.log(str);

使用模板字符串输出列表:


 	<span class="dec"><!DOCTYPE html>
 	<html>
 	     <head>
 	         <meta charset="utf-8">
 	         <title>模板字符串中输出列表</title>
 	     </head>
 	     <body>
 	         <div id="content">
 	         </div>
 	     </body>
 	     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%09%20%20%20%20%20%20%20%20%20let%20%5Bpro1%2Cpro2%2Cpro3%2Cpro4%5D%3D%5B%22%E8%AE%A1%E7%AE%97%E6%9C%BA%E6%8A%80%E6%9C%AF%22%2C%22%E7%94%B5%E5%AD%90%E5%95%86%E5%8A%A1%22%2C%22%E5%9B%BD%E9%99%85%E8%B4%B8%E6%98%93%22%2C%22%E5%B7%A5%E5%95%86%E7%AE%A1%E7%90%86%22%5D%3B%0A%20%09%20%20%20%20%20%20%20%20%20let%20str%20%3D%20%60%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch2%3E%E4%B8%93%E4%B8%9A%E5%88%97%E8%A1%A8%E5%A6%82%E4%B8%8B%3C%2Fh2%3E%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cul%26amp%3Bgt%3B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24%7Bpro1%7D%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24%7Bpro2%7D%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24%7Bpro3%7D%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24%7Bpro4%7D%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%09%20%20%20%20%20%20%20%20%20%60%3B%0A%20%09%20%20%20%20%20%20%20%20%20document.getElementById(%22content%22).innerHTML%3Dstr%3B%0A%20%09%20%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
 	</html>

到此这篇关于ES6基础语法之字符串扩展的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持我们。

标签

发表评论