ES6标准---【二】【学习ES6看这一篇就够了!!】

news2024/11/25 19:27:31

目录

ES6以往文章

ES6新增字符串方法:

includes()、startsWith()、endsWith()

repeat()

padStart()、padEnd()

常见用途

为数值补全指定位数

提示字符串格式

trimStart()、trimEnd()

String.raw()

ES6以往文章

ES6标准-【一】【学习ES6看这一篇就够了!!】-CSDN博客

ES6新增字符串方法:

includes()、startsWith()、endsWith()

传统上,JavaScript只有“indexOf”方法,可以用来确定一个字符串是否包含在另一个字符串中,ES6又提供了三种新方法

  • includes():返回布尔值,表示是否找到了参数字符串
  • startsWith():返回布尔值,表示参数字符串是否在原字符串的头部
  • endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部
let s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
	<script>
		let s = 'Hello world!';
		console.log(s.startsWith('Hello'));
		console.log(s.endsWith('!'));
		console.log(s.includes('o'));
	</script>

效果:

这三个方法都支持第二个参数,表示开始搜索的位置:

下标索引从“0”开始,第一个字符的下标为“0

  • 使用第二个参数n时,endsWiths的n表示只搜索“前n个字符
  • includesstartsWiths表示“从第n个字符开始搜索
let s = 'Hello world!';
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

repeat()

repeat(n)方法返回一个新字符串,表示将原字符串重复n次

  • n只能是正数,如果是负数或者Infinity就会报错!!!!
'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

参数如果是小数,会被取整:

取整只是“简单忽略小数点

'na'.repeat(2.9) // "nana"
'na'.repeat(2.1) // "nana"

如果repeat的参数是“0”到“-1”之间的小数,等同于0

'na'.repeat(-0.9) // ""

参数NaN等同于0

'na'.repeat(NaN) // ""

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

  • 如果参数是一个字符字符串,则等同于“0
  • 如果参数是一个数字字符串,则等同于同等的数字,例如“100”相当于100
'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"
	<script>
		console.log('na'.repeat('xzcxzca'));//相当于repeat(0)
		console.log('na'.repeat('2'));//相当于repeat(2)
		console.log('na'.repeat('-0.9'));//相当于repeat(0)
		console.log('na'.repeat('@#$!'));//相当于repeat(0)
	</script>

 

padStart()、padEnd()

如果某个字符串不够指定长度,可以使用“padStart()补全头部,“padEnd()补全尾部

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

padStart()padEnd() 一共接受两个参数,第一个参数是字符串补全生效的最大长度,第二个参数是用来参与补全的字符串

如果用来补全的字符串与原字符串,两者的长度之和超过了最大长度,则会截去超出位数的补全字符串

	<script>
		console.log('abc'.padStart(10, '0123456789'));
		console.log('abc'.padEnd(10, '0123456789'));
	</script>	

如果原字符串的长度,等于或大于最长长度,则字符串补全不生效,返回原字符串

'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'

如果省略第二个参数,默认使用“空格”补全参数

'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '

常见用途

为数值补全指定位数
'1'.padStart(10, '0') // "0000000001"
'12'.padStart(10, '0') // "0000000012"
'123456'.padStart(10, '0') // "0000123456"
提示字符串格式
'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

trimStart()、trimEnd()

ES6之前,trim()用来消除字符串两端空格,ES6后增加“trimStart()”消除字符串前端空格,“trimEnd()”消除字符串后端空格

  • 它们返回的都是新字符串,不会修改原始字符串
const s = '  abc  ';
s.trim() // "abc"
s.trimStart() // "abc  "
s.trimEnd() // "  abc"
  • 除了空格键,对于tab键、换行符等不可见空白符号都有效
  • trimLeft()traimRight()分别是trimStart()trimEnd()的别名
	<script>
		const s = '  abc  ';
		console.log(s.trim());
		console.log(s.trimLeft());
		console.log(s.trimStart());
		console.log(s.trimRight());
		console.log(s.trimEnd());
	</script>	

 

String.raw()

raw方法返回一个斜杠都被转义(即斜杠前面再加一个斜杠)的字符串,往往用于模版字符串的处理方法

String.raw`Hi\n${2+3}!`
// 实际返回 "Hi\\n5!",显示的是转义后的结果 "Hi\n5!"
String.raw`Hi\u000A!`;
// 实际返回 "Hi\\u000A!",显示的是转义后的结果 "Hi\u000A!"

如果原字符串的斜杠已经转义,那么String.raw()会进行再次转义:

String.raw`Hi\\n`
// 返回 "Hi\\\\n"
String.raw`Hi\\n` === "Hi\\\\n" // true

String.raw()方法可以作为处理模版字符串的基本方法,它会将所有变量替换,并且对斜杠进行转义,方便下一步作为字符串来使用

String.raw()本质上是一个正常的函数,只是专用于模版字符串的标签函数,如果写成正常函数的形式,它的第一个参数,应该是一个具有raw属性的对象,其raw属性的值应该是一个数,对应模板字符串解析后的值

// `foo${1 + 2}bar`
// 等同于
String.raw({ raw: ['foo', 'bar'] }, 1 + 2) // "foo3bar"

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2122479.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

开关电源综合测试平台自动生成报告,智能分析电源测试参数

在电源模块的检测过程中&#xff0c;数据的准确性和分析效率至关重要&#xff0c;开关电源综合测试平台的数据报告和数据分析功能为企业的电源测试带来了便利。 NSAT-8000开关电源综合测试平台是集自动化测试与数据收集分析于一体的综合测试软件&#xff0c;打破了传统测试系统…

【组件】WEB前端-富文本编辑器组件推荐 在线编辑器 Word

【组件】WEB前端-富文本编辑器组件推荐 在线编辑器 Word canvas-editor 基于canvas/svg的富文本编辑器 canvas-editor | rich text editor by canvas/svgrich text editor by canvas/svghttps://hufe.club/canvas-editor-docs/ canvas-editor 基于canvas/svg的富文本编辑器 开…

文案改写工具有哪些?5款智能改写工具迅速提升文案品质

在信息爆炸的时代&#xff0c;优秀的文案如同黄金&#xff0c;能瞬间抓住消费者的眼球。然而&#xff0c;创作出独具匠心的文案并非易事&#xff0c;尤其是当需要不断改写以保持文案内容新鲜感时。那么&#xff0c;文案改写工具有哪些是能帮助我们事半功倍呢&#xff1f;以下5款…

Goby 漏洞发布|(CVE-2024-45195)Apache OFBiz /viewdatafile 代码执行漏洞【已复现】

漏洞名称&#xff1a;Apache OFBiz /viewdatafile 代码执行漏洞&#xff08;CVE-2024-45195&#xff09; English Name&#xff1a;Apache OFBiz /viewdatafile Code Execution Vulnerability(CVE-2024-45195) CVSS core: 8.0 漏洞描述&#xff1a; Apache OFBiz是一个开源…

--数据库--

制作工人薪资管理系统 #include <myhead.h> #include <sqlite3.h> typedef struct {int gh;char name[20];double salary; }Worker;int do_insert(sqlite3 *ppdb) {Worker work;printf("请输入插入的工号&#xff1a;");scanf("%d",&work.…

基于Verilog HDL的FPGA设计基础

第一章 Verilog数字集成电路设计方法概述 HDL(Hardware Description Language)----硬件描述语言 EDA(Electronic Design Automation)----电子设计自动化 VLSI(Very Large Scale Integrated)----超大规模集成电路 ASIC(Application Specific Integrated Circuit)----专用集成电路…

坚守官网,深挖没有错;积极转型也没错,就怕10年前经验用在现在

如今官网建设领域哀嚎一片&#xff0c;出现三种应对策略。 其一&#xff1a;坚守官网&#xff0c;深挖下去&#xff0c;做出高大上&#xff0c;精美炫酷和实效网站&#xff0c;路子很对。 其二&#xff1a;积极寻求转型&#xff0c;客户需要啥就做啥&#xff0c;比如搞小程序…

Vue3可编辑表格插件

插件亮点&#xff1a; 通过可自定义单元格内容。可控的状态控制&#xff0c;例如只读、禁止编辑行等配置。可控的状态交互&#xff0c;例如框选单元格、框选行等配置。可控的推拽顺序&#xff0c;例如拖拽行、推拽列。方便的单元格数据验证配置。方便的快捷右键菜单&#xff0c…

std::map 合并

目录 示例 效果 采用insert函数实现两个map的合并。使用方法&#xff1a; map1.insert(map2) 假如map2的某些键也出现在map1里面&#xff0c;则map1中重复的键值对不变&#xff0c;map2中重复的键值对无法覆盖map1。 示例 #include <map> #include <iostream>…

USB转百兆网卡芯片CH397在多平台下使用说明

简介 CH397是一款USB2.0高速转以太网芯片&#xff0c;支持10M/100M网络的以太网MACPHY&#xff0c;内置青稞RISC-V 处理器、符合IEEE802.3 和IEEE802.3az-2010 协议规范。支持Windows/ Linux /macOS /iOS /Android 等多平台各系统&#xff0c;适配各类台式电脑、笔记本电脑、平…

【Nacos】报错之服务实例类型不允许改变

在使用Nacos配置服务的实例类型的时候&#xff0c;对服务的实例类型进行修改。 之前的非临时实例&#xff0c;修改为临时实例后&#xff0c;报错&#xff1a; com.alibaba.nacos.api.exception.NacosException: errCode: 400, errMsg: Current service DEFAULT_GROUPproduct-…

洛谷 P1039 [NOIP2003 提高组] 侦探推理

题目来源于&#xff1a;洛谷 原题点这里 题目本质&#xff1a;模拟&#xff0c;字符串&#xff0c;差分&#xff0c;模拟 题目思路&#xff1a; 记录每一句话是谁说的以及这句话的内容&#xff0c;可以用map存人名对应的下标&#xff0c;我们枚举每一个人i&#xff0c;假设i…

数据结构与算法1: 链表

基础知识 链表可以被想象为一系列的节点&#xff0c;每个节点至少有一个指针指向下一个节点&#xff0c;在最后一个节点&#xff0c;用null pointer来表示链表的结束。 链表的创建速度通常很快&#xff0c;在表头和表尾的插入也很快&#xff08;O(1)&#xff09;&#xff0c;…

2024年T电梯修理证模拟考试题库及T电梯修理理论考试试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年T电梯修理证模拟考试题库及T电梯修理理论考试试题是由安全生产模拟考试一点通提供&#xff0c;T电梯修理证模拟考试题库是根据T电梯修理最新版教材&#xff0c;T电梯修理大纲整理而成&#xff08;含2024年T电梯…

餐饮酒店旅游服务网站整站模板打包下载

餐饮酒店旅游服务网站整站模板打包下载 餐饮酒店旅游服务网站整站模板打包下载 餐饮酒店旅游服务网站整站模板打包下载 餐饮酒店旅游服务网站整站模板打包下载 餐饮酒店旅游服务网站整站模板打包下载 响应式酒店旅租网站模板_餐饮酒店旅游服务类网站整站打包下载.zip 农家…

怎么能实现VIN码充电吗?针对一个单一的VIN码,设置不同的服务费这种计费模式

为了实现VIN码充电并针对单一VIN码设置不同的服务费这种计费模式&#xff0c;需深入了解VIN码充电的实现过程及技术细节。VIN码充电是一种基于车辆识别号码&#xff08;VIN&#xff09;进行充电和计费的方法&#xff0c;适用于新能源汽车的充电桩。具体分析如下&#xff1a; V…

828华为云征文|华为云Flexus X实例docker部署mediacms,功能齐全的现代化开源视频和媒体CMS

828华为云征文&#xff5c;华为云Flexus X实例docker部署mediacms&#xff0c;功能齐全的现代化开源视频和媒体CMS 华为云最近正在举办828 B2B企业节&#xff0c;Flexus X实例的促销力度非常大&#xff0c;特别适合那些对算力性能有高要求的小伙伴。如果你有自建MySQL、Redis、…

时序预测|基于小龙虾优化高斯过程GPR数据回归预测Matlab程序COA-GPR 多特征输入单输出 附赠基础GPR

时序预测|基于小龙虾优化高斯过程GPR数据回归预测Matlab程序COA-GPR 多特征输入单输出 附赠基础GPR 文章目录 一、基本原理二、实验结果三、核心代码四、代码获取五、总结 时序预测|基于小龙虾优化高斯过程GPR数据回归预测Matlab程序COA-GPR 多特征输入单输出 附赠基础GPR 一、…

CMU 10423 Generative AI:lec4(必读:Sliding Window Attention,RoPE, GQA)

lec4有4篇必读文献分别是&#xff1a;Sliding Window Attention&#xff0c;RoPE&#xff0c;GQA&#xff0c;以及花书的CNN第9.1~9.3节。前3个详细研究了一下&#xff0c;如下&#xff1a; 文章目录 1 Sliding Window Attention&#xff08;2020&#xff09;1.1 概览1.2 个人总…

基于Springboot+vue实现的雪具销售系统

作者主页&#xff1a;Java码库 主营内容&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app等设计与开发。 收藏点赞不迷路 关注作者有好处 文末获取源码 项目描述 根据日常实际需要&#xff0c;一方面需要在系统中实现基…