当前位置: 代码网 > it编程>编程语言>Javascript > ES6基础语法之字符串扩展

ES6基础语法之字符串扩展

2024年05月18日 Javascript 我要评论
一、字符串的遍历js中遍历字符串:var str = "hello,world";for(var i = 0;i<str.length;i++){console.log(str[i]);}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基础语法之字符串扩展的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持代码网。

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com