您的位置：首页 > 编程技术 > 基础知识  >  ES6基础语法之字符串扩展

ES6基础语法之字符串扩展

 更新时间：2022年5月2日 21:35  点击：394 作者：農碼一生

一、字符串的遍历

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基础语法之字符串扩展的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持猪先飞。

原文出处：https://www.cnblogs.com/wml-it/p/15967775.html

[!--infotagslink--]

相关文章

  • PHP添加MongoDB扩展实例教程

    由于要使用mikoomi mongodb plugin插件，所以需要php对mongodb的扩展支持，默认通过源安装的php并没有mongodb的扩展支持，具体可以通过php -m|grep mongo 验证 。这里就结...2016-11-25

  • C#中截取字符串的的基本方法详解

    这篇文章主要介绍了C#中截取字符串的的基本方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-11-03

  • c#中判断字符串是不是数字或字母的方法

    这篇文章介绍了C#判断字符串是否数字或字母的实例，有需要的朋友可以参考一下...2020-06-25

  • PostgreSQL判断字符串是否包含目标字符串的多种方法

    这篇文章主要介绍了PostgreSQL判断字符串是否包含目标字符串的多种方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-02-23

  • 详解C++ string常用截取字符串方法

    这篇文章主要介绍了C++ string常用截取字符串方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-04-25

  • Linux下PHP安装curl扩展支持https例子

    安装curl扩展支持https是非常的重要现在许多的网站都使用了https了，下面我们来看一篇关于PHP安装curl扩展支持https例子吧。 问题： 线上运行的lamp服务器，默认yu...2016-11-25

  • php字符串按照单词逐个进行反转的方法

    本文实例讲述了php字符串按照单词进行反转的方法。分享给大家供大家参考。具体分析如下：下面的php代码可以将字符串按照单词进行反转输出，实际上是现将字符串按照空格分隔到数组，然后对数组进行反转输出。...2015-03-15

  • 使用list stream: 任意对象List拼接字符串

    这篇文章主要介绍了使用list stream:任意对象List拼接字符串操作，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-09-09

  • MySQL 字符串拆分操作(含分隔符的字符串截取)

    这篇文章主要介绍了MySQL 字符串拆分操作(含分隔符的字符串截取)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-22

  • C# 16 进制字符串转 int的方法

    这篇文章主要介绍了C# 16 进制字符串转 int的方法，非常不错，具有参考借鉴价值,需要的朋友可以参考下...2020-06-25

  • 获取中文字符串的实际长度代码

    JS中默认中文字符长度和其它字符长度计算方法是一样的，但某些情况下我们需要获取中文字符串的实际长度，代码如下： 复制代码 代码如下: function strLength(str) { var realLength = 0, len = str.length, charCode = -1;...2014-06-07

  • C#实现字符串转换成字节数组的简单实现方法

    这篇文章主要介绍了C#实现字符串转换成字节数组的简单实现方法,仅一行代码即可搞定,非常简单实用,需要的朋友可以参考下...2020-06-25

  • php 中英文混合字符串截取

    文章介绍一个实用的函数，我们如果用php substr来截取字符在中文上处理的很有问题，今天自己写了一个比较好的中文与英文字符截取的函数，有需要的朋友可以参考下。 ...2016-11-25

  • C#实现对字符串进行大小写切换的方法

    这篇文章主要介绍了C#实现对字符串进行大小写切换的方法,涉及C#操作字符串的技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25

  • c#将字节数组转成易读的字符串的实现

    这篇文章主要介绍了c#将字节数组转成易读的字符串的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-25

  • PostgreSQL 字符串处理与日期处理操作

    这篇文章主要介绍了PostgreSQL 字符串处理与日期处理操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-01

  • C#获取字符串后几位数的方法

    这篇文章主要介绍了C#获取字符串后几位数的方法,实例分析了C#操作字符串的技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25

  • PHP扩展开发教程(总结)

    PHP是一种解释型的语言，对于用户而言，我们精心的控制内存意味着easier prototyping和更少的崩溃！当我们深入到内核之后，所有的安全防线都已经被越过，最终还是要依赖于真正有责任心的软件工程师来保证系统的稳定运行。1、线...2015-11-08

  • C#判断一个字符串是否是数字或者含有某个数字的方法

    这篇文章主要介绍了C#判断一个字符串是否是数字或者含有某个数字的方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下...2020-06-25

  • 【C#基础】Substring截取字符串的方法小结（推荐）

    这篇文章主要介绍了Substring截取字符串方法小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-25