es6字符串扩展

子串识别

  自从 JS 引入了 indexOf() 方法,开发者们就使用它来识别字符串是否存在于其它字符串中。ES6 包含了以下三个方法来满足这类需求:includes()、startsWith()、endsWith()

【includes()】

  该方法在给定文本存在于字符串中的任意位置时会返回 true ,否则返回false

【startsWith()】

  该方法在给定文本出现在字符串起始处时返回 true ,否则返回 false

【endsWith()】

  该方法在给定文本出现在字符串结尾处时返回 true ,否则返回 false 

  以上每个方法都接受两个参数:需要搜索的文本,以及可选的搜索起始位置索引

  当提供了第二个参数(假设为n)时, includes() 与 startsWith() 方法会从该索引位置(n)开始尝试匹配;而endsWith() 方法则从字符串长度减去这个索引值的位置开始尝试匹配

  当第二个参数未提供时, includes() 与 startsWith() 方法会从字符串起始处开始查找,而 endsWith() 方法则从尾部开始。实际上,第二个参数减少了搜索字符串的次数

var msg = "Hello world!";
console.log(msg.startsWith("Hello")); // true
console.log(msg.endsWith("!")); // true
console.log(msg.includes("o")); // trueconsole.log(msg.startsWith("o")); // false
console.log(msg.endsWith("world!")); // true
console.log(msg.includes("x")); // falseconsole.log(msg.startsWith("o", 4)); // true
console.log(msg.endsWith("o", 5)); // true
console.log(msg.includes("o", 8)); // false

 

  虽然这三个方法使得判断子字符串是否存在变得更容易,但它们只返回了一个布尔值。若需要找到它们在字符串中的确切位置,则需要使用 indexOf() 和 lastIndexOf() 

  [注意]如果向 startsWith() 、 endsWith() 或 includes() 方法传入了正则表达式而不是字符串,会抛出错误。而对于indexOf()和lastIndexOf()这两个方法,它们会将正则表达式转换为字符串并搜索它

 

字符串重复

【repeat()】

  ES6为字符串添加了一个 repeat() 方法,它接受一个参数作为字符串的重复次数,返回一个将初始字符串重复指定次数的新字符串

console.log("x".repeat(3)); // "xxx"
console.log("hello".repeat(2)); // "hellohello"
console.log("abc".repeat(4)); // "abcabcabcabc"

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

console.log('na'.repeat(2.9)); // "nana"

  如果repeat的参数是负数或者Infinity,会报错

//Uncaught RangeError: Invalid count value
console.log('na'.repeat(Infinity));
//Uncaught RangeError: Invalid count value
console.log('na'.repeat(-1));

  如果参数是0到-1之间的小数,则等同于0,这是因为会先进行取整运算。0到-1之间的小数,取整以后等于-0repeat视同为0

console.log('na'.repeat(-0.9)); // ""

  参数NaN等同于0

console.log('na'.repeat(NaN)); // ""

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

console.log('na'.repeat('na')); // ""
console.log('na'.repeat('3'));  // "nanana"

【创建缩进级别】

  此方法比相同目的的其余方法更加方便,在操纵文本时特别有用,尤其是在需要产生缩进的代码格式化工具中

// 缩进指定数量的空格
var indent = " ".repeat(4),
indentLevel = 0;
// 需要增加缩进时
var newIndent = indent.repeat(++indentLevel);

  调用第一个repeat()方法创建了一个包含四个空格的字符串,indentLevel变量用来持续追踪缩进的级别。此后,可以通过增加indentLevel的值来调用repeat() 方法,从而改变空格数量

 

字符串补全

  ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全

【padStart()】

  头部补全

【padEnd()】

  尾部补全

  padStart()padEnd()一共接受两个参数,第一个参数用来指定字符串的最小长度,第二个参数是用来补全的字符串

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

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

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

  如果原字符串的长度,等于或大于指定的最小长度,则返回原字符串

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

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

'abc'.padStart(10, '0123456789')// '0123456abc'

【应用】

  padStart的常见用途是为数值补全指定位数。下面代码生成10位的数值字符串

'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"

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

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

相关文章

深度解读企业云上办公利器「无影云电脑」

简介:信息化进程高速发展的今天,用户桌面办公的需求正不断发生变化:远程办公,BYOD的需求不断增长;快速交付,高效运维的需求接连上升;数据及网络安全的关注度持续提高;整体办公成本在…

云风:不加班、不炫技,把复杂的问题简单化

小学时跟随母亲去成人大学学习编程,初中开始参加信息学奥赛,高中写出人生中第一个成熟软件——Cview,大学发布开源软件风魂系列,后用于网易开发的《大话西游》《梦幻西游》等热门游戏,离开网易创立简悦科技……随着云风…

Timing:在线自习室快速搭建

通过超低延迟的音视频通信技术、视频连麦、弱网传输算法,快速搭建自习场景,提升自习效率。 客户简介 氪细胞主打产品Timing,是国内最早推出,也是规模最大的在线自习室,是新一代的教育与社交融合平台,主打高…

Nacos2.0的K8s服务发现生态应用及规划

简介:Nacos 是阿里巴巴于 2018 年开源的注册中心及配置中心产品,帮助用户的分布式微服务应用进行服务发现和配置管理功能。随着 Nacos2.0 版本的发布,在性能和扩展性上取得较大突破后,社区开始考虑如何提供更加云原生方向的功能和…

webview 和 React Native 中吸顶效果实现

作者 | 👽来源 | Sharing一、前言 在跨端开发中,离不开一些吸顶的交互场景,可以参考淘宝或是京东类电商 app 中一些 tab ,在整个容器滑动的过程中,吸顶效果非常的连贯和丝滑的,当然这些 tab 可能是用 nativ…

h5 history

history的Api方法和使用: history.pushState(data,title,url):在浏览器中新增一条历史记录; data会在onpopstate事件触发时作为参数传递过去,title为页面标题,url为页面地址;   history.replaceState(d…

AHPA:开启 Kubernetes 弹性预测之门

简介:阿里巴巴云原生团队和阿里达摩院决策智能时序团队合作开发 AHPA 弹性预测产品,该产品主要出发点是基于检测到的周期做“定时规划”,通过规划实现提前扩容的目的,在保证业务稳定的情况下,让你真正实现按需使用。 …

Kubernetes 在科技革命中的演变

作者 | Anthony Spiteri仅在一两年前,对于那些希望通过向现代数据平台转型走在前沿的企业来讲,容器化可是热门词汇。Kubernetes,也被称为 K8s,当时还不成熟,仅处于起步阶段,对更广泛的IT界来说仍然有些陌生…

在阿里巴巴,我们如何先于用户发现和定位 Kubernetes 集群问题?

简介:本文整理自阿里云高级研发工程师彭南光(光南) 在 KubeCon China 2021 大会的演讲实录,分享了阿里巴巴是如何通过自研通用链路探测定向巡检工具 KubeProbe 应对大规模集群的稳定性挑战的。关于阿里云云原生团队在本次 KubeCon 上分享的全部内容沉淀于…

jQ原理小例子

//jquery 原理 var $ function (name) {return document.querySelector(name)}console.log($(#box))var obj {get() {console.log(你好)return this},setName() {console.log(不好)return this},}

“虎力全开”采购季,存储产品已就位

简介:两百多年前,有个叫吴锡麒的少年,在“江南三月听莺天,买酒莫论钱”。如今又逢暮春三月,一年一度的开年大促——阿里云上云采购季也拉开了序幕。 两百多年前,有个叫吴锡麒的少年,在“江南三月…

武汉高性能计算大会2022举办,高性能计算生态发展再添新动力

武汉高性能计算大会2022会上,华为重磅发布了鲲鹏高性能计算解决方案,为了进一步推进高性能产业的生态繁荣,武汉高性能计算产业联盟成立启动,长江欧拉生态创新中心签约并揭牌,首批鲲鹏科研创新使能计划成员也正式亮相。…

vue 修饰符

一、事件修饰符 .stop 阻止事件继续传播.prevent 阻止标签默认行为.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理.self 只当在 event.target 是当前元素自身时触发处理函数.once 事件将只会触发一次.passive 告诉浏览器你…

学信网:研究生云复试平台快速搭建上线

通过覆盖全球的音视频通信服务,支撑学信网视频面试稳定运行和效率提升。 案例简介 研究生复试工作碰到疫情,各大院校先后发布复试流程调整通知,将复试工作从线下搬到了线上,这也是历史上的第一次。要在短期内完成视频面试系统的…

企业深入使用微服务后会面临哪些问题?云原生全链路灰度给了新思路

简介:如何落地可灰度、可观测、可回滚的安全生产三板斧能力,满足业务高速发展情况下快速迭代和小心验证的诉求,是企业在微服务化深入过程中必须要面对的问题。在云原生流行的当下,这个问题又有了一些新的思路与解法。 作者&#…

vue 面试题合集

vue面试题(全) 原理篇: 1,computed和watch的区别 computed 计算属性 : 依赖其它属性值,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值。 对检测的值没有要求 w…

40 张图 详解 Docker 容器监控

作者 | 飞向星的客机来源 | CSDN博客前言在企业中,通常业务是不允许随意停止的,否则将给企业带来巨大的经济损失。运维工程师要保证业务正常运行,就必须利用工具时刻监控业务的运行状态,容器中的业务也不例外。除了容器自身的监控…

Spring Cloud Gateway 突发高危漏洞,下一代云原生网关恰逢其时?

简介:Log4j2 的漏洞刚告一段落,Spring 官方在 2022 年 3 月 1 日发布了 Spring Cloud Gateway 的两个 CVE 漏洞:分别为 CVE-2022-22946(严重性:Medium)与 CVE-2022-22947(代码注入漏洞&#xff…

es6 箭头函数 rest参数 扩展运算符

Es6 箭头函数 语法: 普通函数: fnfunction(){}箭头函数: fn()>{}特性: this是静态的,this始终指向函数声明时所在作用域下的this的值(使用call,bind改变指向无效)不能作为构造实…

云小蜜 Dubbo3.0 实践:从微服务迁移上云到流量治理

简介:阿里云-达摩院-云小蜜对话机器人产品基于深度机器学习技术、自然语言理解技术和对话管理技术,为企业提供多引擎、多渠道、多模态的对话机器人服务。17 年云小蜜对话机器人在公共云开始公测,同期在混合云场景也不断拓展。为了同时保证公共…