ES6基础语法之字符串扩展

更新时间：2022年05月02日 09:14:35 作者：農碼一生

这篇文章介绍了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}</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);

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模板字符串中输出列表</title>
	</head>
	<body>
		<div id="content">		
		</div>		
	</body>
	<script>
		let [pro1,pro2,pro3,pro4]=["计算机技术","电子商务","国际贸易","工商管理"];
		let str = `
			<h2>专业列表如下</h2>
			<ul>
				<li>${pro1}</li>
				<li>${pro2}</li>
				<li>${pro3}</li>
				<li>${pro4}</li>
			</ul>
		`;
		document.getElementById("content").innerHTML=str;
	</script>
</html>

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

您可能感兴趣的文章:

JavaScript中的其他对象
2008-01-01
javascript基础之查找元素的详细介绍(访问节点)
常用jQuery的话我们知道，jQuery有非常强大的选择器来查找元素（也称作访问节点），例如：基本选择器、层次选择器、过滤选择器、属性选择器等
2013-07-07
JavaScript 基础篇之运算符、语句（二）
其实运算符大家要是有计算机语言基础应该都知道，可能甚至比我还精通，这样我就不多解释了，就来说说其它几个生疏的吧
2012-04-04
现如今最流行的JavaScript代码规范
流行的虽然不一定是好的，但是从交流的角度来说，按照流行的风格编写代码，可以让你的代码在大多数人看起来更习惯
2014-03-03
详解JavaScript中的blink()方法的使用
这篇文章主要介绍了详解JavaScript中的blink()方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下
2015-06-06
详细讲解JS节点知识
最近发现DOMDocument对象很重要,还有XMLHTTP也很重要
2010-01-01
window.open参数详解附实例
一般我们在开发过程中通过window.open打开新窗口，但现在浏览器与杀毒都防止了这个函数弹出页面，一般我们将页面设置信任才可以使用，不过我们在后台开发过程中仍然通过这个方法打开页面，这里简单介绍下使用方法与常用参数
2013-06-06
JavaScript起点(严格模式深度了解)
严格模式(Strict Mode)是ECMAScript5新增的功能,目前所有的主流浏览器的最新版本——包括IE10与Opera12——都支持严格模式,感兴趣的朋友可以了解下啊，希望本文对你有所帮助
2013-01-01
javascript的几种写法总结
下面小编就为大家带来一篇javascript的几种写法总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-09-09
JavaScript中匿名函数的用法及优缺点详解
下面小编就为大家带来一篇JavaScript中匿名函数的用法及优缺点详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06