详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()

当有人问到用来确定一个字符串是否包含在另一个字符串中有哪些方法时，我们会不假思索回答道：indexOf方法。其实，ES6 又提供了三种新方法includes()、startsWith()、endsWith()，也是比较好用的。

indexOf方法在这里就不多说了，大家都比较熟悉，意思就是：返回给定元素在数组中第一次出现的位置，返回结果是匹配开始的位置，如果没有出现则返回-1。

下面详细介绍ES6新增的这三种方法：

①includes()：返回布尔值，表示是否找到了参数字符串。

如下所示：

let str = 'Hello world!';
let res1 = str.includes('Hello');
let res2 = str.includes('hi');
console.log(res1); // true
console.log(res2); // false

结果：

②startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。

如下所示：

let str = 'Hello world!';
let res1 = str.startsWith('Hello');
let res2 = str.startsWith('world');
console.log(res1); // true
console.log(res2); // false

结果：

③endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

如下所示：

let str = 'Hello world!';
let res1 = str.endsWith('!');
let res2 = str.endsWith('d');
console.log(res1); // true
console.log(res2); // false

结果：

这三个方法都支持第二个参数，表示看是搜索的位置。

 let str = 'Hello World!'
 console.log(str.includes('World', 5)) // true 从索引5(包含索引5)开始搜索
 console.log(str.includes('World', 7)) // false
 console.log(str.startsWith('lo', 3)) // true
 console.log(str.startsWith('H', 3)) // false
 console.log(str.endsWith('Hel', 3)) // true
 console.log(str.endsWith('d', 3)) // false

到此这篇关于详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()的文章就介绍到这了,更多相关ES6 includes() startsWith() endsWith()内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • es6 字符串String的扩展(实例讲解)

    新特性:模板字符串 传统字符串 let name = "Jacky"; let occupation = "doctor"; //传统字符串拼接 let str = "He is "+ name +",he is a "+ occupation; es6简洁的字符串拼接 let name = "Jacky"; let occupation = "doctor"; //模板字符串拼接 le

  • 详解JavaScript ES6中的模板字符串

    在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用反引号 (`) 表示,它们看上去和普通的字符串没有什么区别.在最简单的情况下,他们就是普通的字符串: context.fillText(`Ceci n'est pas une cha?ne.`, x, y); context.fillText(`Ceci n'est pas une cha?ne.`, x, y); 之所以被称为模板字符串,是因为模板字符串为 JS 引入了简单的字符串插值特性,也就是说,可以方便优雅地将 JS 的值

  • JavaScript中ES6字符串扩展方法

    es6这个String对象倒是扩展了不少方法,但是很多都是跟字符编码相关,个人选了几个感觉比较常用的方法: includes 搜索字符的神器 还记得我们之前如何判断某个字符串对象是否包含特地字符的吗? var str='google'; if(str.indexOf('o')>-1){ console.log('yes'); }else{ console.log('no'); } indexOf本来只是一个获取字符对应位置的方法,因为找到不到会返回-1这个值,就成了判断是否包含的方法,inclu

  • ES6之模版字符串的具体使用

    最近在项目中使用了ES6的模版字符串,在这里加以总结. 1.之前我们也可以使用JavaScript输出模版字符串,通常是下面这样的: $("#result").append( "He is <b>"+person.name+"</b>"+"and we wish to know his"+person.age+".That is all" ); 但是我们可以看到:这样的传统做法需要使

  • ES6中字符串的使用方法扩展

    字符的Unicode表示法 JavaScript允许采用\uxxxx形式表示一个字符,其中"xxxx"表示字符的码点. "\u0061" // "a" 但是,这种表示法只限于\u0000--\uFFFF之间的字符.超出这个范围的字符,必须用两个双字节的形式表达. "\uD842\uDFB7" // "

  • 深入浅出es6模板字符串

    深入浅出es6模板字符串

    本文主要介绍了深入浅出es6模板字符串,分享给大家,具体如下 作为前端开发者避免不了根据后台数据的返回,组装html,渲染页面.举个栗子 $('#result').append( 'There are <b>' + basket.count + '</b> ' + 'items in your basket, ' + '<em>' + basket.onSale + '</em> are on sale!' ); 有时候还要给标签加一些属性,写起来很不方便,

  • ES6模板字符串和标签模板的应用实例分析

    本文实例讲述了ES6模板字符串和标签模板的应用.分享给大家供大家参考,具体如下: ES6 中对字符串进行了扩展,而模板字符串就是一个非常实用的方式,可以在html中实现与变量和方法的混编 之前我们手动拼接字符串的方式 let hello = 'Hello'; let html = '<div>' + '<span>'+ hello +'</span>' + '</div>'; console.log(html); // <div><span

  • ES6新特性之变量和字符串用法示例

    本文实例讲述了ES6新特性之变量和字符串用法.分享给大家供大家参考,具体如下: 一.变量 1. LET 我们都习惯用var 来声明变量,现在还可以用let来声明变量,两者的主要区别是作用域:var声明的变量作用域为包围它的函数,而let声明的变量作用域仅在它所在的块中.(在ES5中是没有块的概念的). if(true){ let a=1; } console.log(a);//undifined 这样使代码更加干净,减少滞留的变量,再如我们经常用的数组遍历: for(let i=0;i<list

  • ES6新特征数字、数组、字符串

    一.let和const let:声明变量,只在声明的块级作用域(大括号)内起作用［注意:let不向var那样可以自动提升］ 如果一个区块内存在let或const命令,该区块就被解析成封闭作用域(暂时性死区,必须先声明再使用) ［所以一个区块内只要有let,就可能存在死区,就可能会出现变量声明使用顺序的错误］ let为JavaScript增加了块级作用域 ES6中在块级作用域声明的函数不能在外部被引用,但在ES5中可以(ES5中的函数声明可以提升到全局作用域或函数作用域头部,ES6中不行,但是ES

  • 详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()

    当有人问到用来确定一个字符串是否包含在另一个字符串中有哪些方法时,我们会不假思索回答道:indexOf方法.其实,ES6 又提供了三种新方法includes().startsWith().endsWith(),也是比较好用的. indexOf方法在这里就不多说了,大家都比较熟悉,意思就是:返回给定元素在数组中第一次出现的位置,返回结果是匹配开始的位置,如果没有出现则返回-1. 下面详细介绍ES6新增的这三种方法: ①includes():返回布尔值,表示是否找到了参数字符串. 如下所示: let

  • 详解es6新增数组方法简便了哪些操作

    什么是es6? 在这里不过多阐述,我也是跟着阮一峰大佬的<es6入门>来学习的,es6新增了很多的方法.属性,让我们在编码中得到了很高的提升,在这里只对array这块进行阐述,其他的就过不多介绍了. 言归正传,在项目中,经常会遇到处理数据,筛选数据的要求,我们更多的会借助于for循环来完成,比如:数组去重,传统方法如下(以下所有实例只列举一种) let a = [1,2,2,3,3,4,5]; let b = [a[0]]; for(let i = 0; i < a.length; i+

  • 详解ES6数组方法find()、findIndex()的总结

    详解ES6数组方法find()、findIndex()的总结

    本文主要讲解ES6数组方法find()与findIndex(),关于JS的更多数组方法,可参考以下: ①JavaScript 内置对象之-Array ②ES5新增数组方法(例:map().indexOf().filter()等) ③ES6新增字符串扩张方法includes().startsWith().endsWith() 1. find() 该方法主要应用于查找第一个符合条件的数组元素,即返回通过测试(函数内判断)的数组的第一个元素的值. 它的参数是一个回调函数,为数组中的每个元素都调用一次函

  • 详解PHP处理字符串类似indexof的方法函数

    详解PHP处理字符串类似indexof的方法函数 在PHP中处理字符串类似 indexof 的函数或方法有两个,它们是 strpos 函数和 stripos 函数,这两个函数的用法类似. strpos 函数处理字符串时如果包含该字符串,则返回该字符串出现的第一次出现的位置,如果没有出现则返回 false.对字符串大小写敏感. stripos 函数处理字符串时如果包含该字符串,则返回该字符串出现的第一次出现的位置,如果没有出现则返回 false.对字符串大小写不敏感. PHP strpos() 函

  • 详解JS截取字符串的三个方法substring,substr,slice

    目录 相同点 不同点 substring 语法 参数 说明 substr 语法 参数 说明 slice 语法 参数 说明 总结一下 js中有三个截取字符的方法,分别是substring().substr().slice(),平时我们可能都用到过,但总是会对这些方法有点混淆,特别是substring()和substr(),连方法名都差不多,下面就具体来看一下区别. 相同点 这三个方法都可以对字符串进行截取,并且返回一个新的字符串,也就是不会对原字符串进行修改 . 这里 > 表示控制台输入,< 表

  • 详解ES6 扩展运算符的使用与注意事项

    扩展运算符 spread syntax 又叫展开语法,写法是 ...,顾名思义,其实是用来展开字符串,数组和对象的一种语法,可以在函数调用/数组构造时, 将数组表达式或者 string 在语法层面展开:还可以在构造字面量对象时, 将对象表达式按 key-value 的方式展开.常用的语法如下: //函数调用: myFunction(...iterableObj); //字面量数组构造或字符串: [...iterableObj, '4', ...'hello', 6]; // 构造字面量对象时,进

  • 详解JavaScript数据类型和判断方法

    详解JavaScript数据类型和判断方法

    前言 JavaScript 中目前有 7 种基本(原始primitives)数据类型 Undefined, Null,Boolean, Number, String,BigInt,Symbol,以及一种引用类型 Object,Object 中又包括 Function,Date,JSON,RegExp等,除了 7 种原始类型,其他的所有能够用 new 实例化的内置类型都是 Object 构造的. 数据类型 对于数据了类型我们可以通过 typeof 运算符来判断,具体结果看下图. 原始类型中两个比较

  • 详解ES6语法之可迭代协议和迭代器协议

    ECMAScript 2015的几个补充,并不是新的内置或语法,而是协议.这些协议可以被任何遵循某些约定的对象来实现. 有两个协议:可迭代协议和迭代器协议. 可迭代协议 可迭代协议允许 JavaScript 对象去定义或定制它们的迭代行为, 例如(定义)在一个 for..of 结构中什么值可以被循环(得到).一些内置类型都是内置的可迭代对象并且有默认的迭代行为, 比如 Array or Map, 另一些类型则不是 (比如Object) . Iterator 接口的目的,就是为所有数据结构,提供了

  • 详解操作cookie的原生方法cookieStore

    详解操作cookie的原生方法cookieStore

    1. 平时如何操作 cookie document.cookie 能获取到当前域所有的 cookie 字符串.每个 cookie 用分号进行隔开: document.cookie; // "a=1; b=2; c=wenzi" 操作 cookie,均是在操作 document.cookie.如下面就是我常用的一段代码: /** * 写cookies * @param {string} name 写cookie的key * @param {string|number} value 写co

  • 详解ES6 CLASS在微信小程序中的应用实例

    ES6 CLASS基本用法 class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } } 1.1 constructor方法 constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法.一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加.

随机推荐