资讯专栏INFORMATION COLUMN

JavaScript 字符串实用常操纪要

Harpsichord1207 / 2400人阅读

摘要:另外如果为负数,则表示从字符串尾部开始算起。将要搜寻的子字符串。从当前字符串的哪个索引位置开始搜寻子字符串默认为。否则则会返回一个数组,数组中存放所有符合要求的子字符串,并且没有和属性。

原文链接

JavaScript 字符串用于存储和处理文本。因此在编写 JS 代码之时她总如影随形,在你处理用户的输入数据的时候,在读取或设置 DOM 对象的属性时,在操作 Cookie 时,在转换各种不同 Date 时,诸此等等,繁不能数;而她那蛮多的 API 呵,总有些让人不愿去记忆的冲动,既然用时常搜,倒不如烂笔头一番,以作了结,顺道也体现下这博客存在的价值,由此就有了这篇纪要。

一、字符串截取 1、substring()

str.substring(start, end)

substring()是最常用到的字符串截取方法,它可以接收两个参数,参数不能为负值,分别是要截取的开始位置和结束位置,并且返回一个新的字符串,其内容是从start处到end-1处的所有字符。若结束参数end省略,则表示从start位置一直截取到最后。

let str = "www.jeffjade.com"
console.log(str.substring(0,3)) // www
console.log(str.substring(4))   // jeffjade.com
console.log(str.substring(-2))  // www.jeffjade.com (传负值则视为0)
2、slice()

str.slice(start, end)

slice()方法与substring()方法非常类似,它传入的两个参数也分别对应着开始位置和结束位置。而区别在于,slice()中的参数可以为负值,如果参数是负数,则该参数规定的是从字符串的尾部开始算起的位置。比如说,-1指字符串的最后一个字符。

let str = "www.jeffjade.com"
console.log(str.slice(0, 3))   // www
console.log(str.slice(-3, -1)) // co
console.log(str.slice(1, -1))  // www.jeffjade.co
console.log(str.slice(2, 1))   // "" (返回空字符串,start须小于end)
console.log(str.slice(-3, 0))  // "" (返回空字符串,start须小于end)
3、substr()

str.substr(start, length)

substr()方法可在字符串中抽取从start下标开始的指定数目的字符。其返回值为一个字符串,包含从 strstart(包括start所指的字符)处开始的length个字符。如果没有指定length,那么返回的字符串包含从startstr的结尾的字符。另外如果start为负数,则表示从字符串尾部开始算起。

let str = "www.jeffjade.com"
console.log(str.substr(1, 3))  // ww.
console.log(str.substr(0))     // www.jeffjade.com
console.log(str.substr(-3, 3)) // com
console.log(str.substr(-1, 5)) // m  (目标长度较大的话,以实际截取的长度为准)
4、split()

str.split([separator][, limit])

separator指定用来分割字符串的字符(串)。separator可以是一个字符串或正则表达式。如果忽略 separator,则返回整个字符串的数组形式。如果separator是一个空字符串,则str将会把原字符串中每个字符的数组形式返回。

limit是一个整数,限定返回的分割片段数量。split方法仍然分割每一个匹配的separator,但是返回的数组只会截取最多limit个元素。

let str = "www.jeffjade.com"
console.log(str.split("."))          // ["www", "jeffjade", "com"]
console.log(str.split(".", 1))       // ["www"]
console.log(str.split(".").join("")) // wwwjeffjadecom
二、查找类方法 1、indexOf()

str.indexOf(searchValue, fromIndex)

indexOf()用来检索指定的字符串值在字符串中首次出现的位置。它可以接收两个参数,searchValue表示要查找的子字符串,fromIndex表示查找的开始位置,省略的话则从开始位置进行检索。

let str = "www.jeffjade.com"
console.log(str.indexOf("."))     // 3
console.log(str.indexOf(".", 1))  // 3
console.log(str.indexOf(".", 5))  // 12
console.log(str.indexOf(".", 13)) // -1
2、includes()(ES6)

includes()方法用于判断一个字符串是否被包含在另一个字符串中,如果是返回true,否则返回false

str.includes(searchString[, position])

·searchString·将要搜寻的子字符串。position可选。从当前字符串的哪个索引位置开始搜寻子字符串;默认为0。需要注意的是,includes()区分大小写的。

console.log("Blue Whale".includes("blue"));       // false
console.log("乔峰乔布斯乔帮主".includes("乔布斯")); // true
3、lastIndexOf()

str.lastIndexOf(searchValue, fromIndex)

lastIndexOf()语法与indexOf()类似,它返回的是一个指定的子字符串值最后出现的位置,其检索顺序是从后向前。

let str = "www.jeffjade.com"
console.log(str.lastIndexOf("."))     // 12
console.log(str.lastIndexOf(".", 1))  // -1
console.log(str.lastIndexOf(".", 5))  // 3
console.log(str.lastIndexOf(".", 12)) // 12
4、search()

str.search(substr)
str.search(regexp)

search()方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。它会返回第一个匹配的子字符串的起始位置,如果没有匹配的,则返回-1。

let str = "www.jeffjade.com"
console.log(str.search("w"))    // 0
console.log(str.search(/j/g))   // 4
console.log(str.search(/./g))  // 3
5、match()

str.match(substr)
str.match(regexp)

match()方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。

如果参数中传入的是子字符串或是没有进行全局匹配的正则表达式,那么match()方法会从开始位置执行一次匹配,如果没有匹配到结果,则返回null。否则则会返回一个数组,该数组的第0个元素存放的是匹配文本,除此之外,返回的数组还含有两个对象属性indexinput,分别表示匹配文本的起始字符索引和str的引用(即原字符串)。

let str = "#1a2b3c4d5e#";
console.log(str.match("A")); // 返回 null
console.log(str.match("b")); // 返回 ["b", index: 4, input: "#1a2b3c4d5e#"]
console.log(str.match(/b/)); // 返回 ["b", index: 4, input: "#1a2b3c4d5e#"]

如果参数传入的是具有全局匹配的正则表达式,那么match()从开始位置进行多次匹配,直到最后。如果没有匹配到结果,则返回null。否则则会返回一个数组,数组中存放所有符合要求的子字符串,并且没有indexinput属性。

let str = "#1a2b3c4d5e#"
console.log(str.match(/h/g))  // 返回 null
console.log(str.match(/d/g)) // 返回 ["1", "2", "3", "4", "5"]
三、其他方法 1、replace()

str.replace(regexp/substr, replacement)

replace()方法用来进行字符串替换操作,它可以接收两个参数,前者为被替换的子字符串(可以是正则),后者为用来替换的文本。

如果第一个参数传入的是子字符串或是没有进行全局匹配的正则表达式,那么replace()方法将只进行一次替换(即替换最前面的),返回经过一次替换后的结果字符串。

let str = "www.jeffjade.com"
console.log(str.replace("w", "a")) // aww.jeffjade.com
console.log(str.replace(/w/, "A")) // Aww.jeffjade.com

如果第一个参数传入的全局匹配的正则表达式,那么replace()将会对符合条件的子字符串进行多次替换,最后返回经过多次替换的结果字符串。

let str = "www.jeffjade.com"
console.log(str.replace(/w/g, "A"))   // AAA.jeffjade.com

replace(),这个方法挺有用。如果是在稍微擅长正则的情形下,用replace等方法,来截取字符串,也是一个挺不错的选择;这对于某些场景下,可达到事半功倍之效,如下示例:

let str = "jeff@nice&jade"
console.log(str.replace(/@[sS]*/g, ""))  // "jeff"
console.log(str.replace(/@[sS]*&/g, "")) // "jeffjade"
2、toLowerCase()

str.toLowerCase()

toLowerCase()方法可以把字符串中的大写字母转换为小写

let str = "www.jeffjade.com"
console.log(str.toLowerCase())   // www.jeffjade.com
3、toUpperCase()

str.toUpperCase()

toUpperCase()方法可以把字符串中的小写字母转换为大写

let str = "www.jeffjade.com"
console.log(str.toUpperCase())   // WWW.JEFFJADE.COM
四、组合用法 1、字符串反转
String.prototype.reverse = function () {
    return this.split("").reverse().join("")
}
2、去除空白行
String.prototype.removeBlankLines = function () {
    return this.replace(/(
[s	]*
*
)/g, "
").replace(/^[

	]*|[

	]*$/g, "")
}
3、String转化为数组

一维数组

let str= "陈寅恪,鲁迅,钱钟书,胡适,王国维,梁启超,吴宓,季羡林"
let arr= str.split(",")
console.log(arr) // ["陈寅恪", "鲁迅", "钱钟书", "胡适", "王国维", "梁启超", "吴宓", "季羡林"]

二维数组

String.prototype.removeBlankLines = function () {
  return this.replace(/(
[s	]*
*
)/g, "
").replace(/^[

	]*|[

	]*$/g, "")
}
String.prototype.arr = function(firstSplit, secondSplit){
  var contentStr = this.removeBlankLines(),
      contentStrArr = contentStr.split(firstSplit),
      resultArr = contentStrArr.map((element) => {
        return element.split(secondSplit)
      })
  return resultArr
}
var str = `
渺渺钟声出远方,依依林影万鸦藏。
一生负气成今日,四海无人对夕阳。
破碎山河迎胜利,残馀岁月送凄凉。
松门松菊何年梦,且认他乡作故乡。
`
console.log(str.arr("
", ","))
// [["渺渺钟声出远方", "依依林影万鸦藏。"],
//  ["一生负气成今日", "四海无人对夕阳。"],
//  ["破碎山河迎胜利", "残馀岁月送凄凉。"],
//  ["松门松菊何年梦", "且认他乡作故乡。"]]
4、startsWith()
if (typeof String.prototype.startsWith != "function") {
  String.prototype.startsWith = function (prefix){
    return this.slice(0, prefix.length) === prefix
  }
}
5、endWith()
if (typeof String.prototype.endsWith != "function") {
  String.prototype.endsWith = function(suffix) {
    return this.indexOf(suffix, this.length - suffix.length) !== -1
  }
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/81928.html

相关文章

  • JavaScript中函数纪要(一)

    摘要:中函数是一等公民,所有的函数实际上是一个对象,与其他引用类型一样拥有着属性和方法,也可以被外界或者自身调用,也可以像传递参数一样将函数传递给另一个函数。中函数没有重载的概念,当定义两个同名函数的时候,前一个函数会被覆盖掉,举个栗子。 JavaScript中函数是一等公民,所有的函数实际上是一个Function对象,与其他引用类型一样拥有着属性和方法,也可以被外界或者自身调用,也可以像传...

    plus2047 评论0 收藏0
  • JavaScript中函数纪要(二)

    摘要:和方法大作用致相同,不同的方法接受的参数,必须要明确所有要处理的参数,也就是说,参数必须要逐个列举,而方法可以选择数组作为参数,因此可以在具体的环境中,看看是选择还是方法。 在函数内部有着一个名叫arguments的类数组对象,内部包含着传入函数的所有参数,在arguments对象中,有一个名叫callee的属性,其作用可见下面这个阶乘的栗子: function factorial(n...

    tolerious 评论0 收藏0
  • 极简爬虫攻防战纪要

    摘要:极简爬虫攻防战纪要爬虫是构建搜索引擎的基础负责抓取网页信息并对网页识别分类及过滤。爬虫方终于锁定了第一场战役的胜局由于断崖式技术的出现,反爬方在浏览器识别战役上望风披靡。经过反爬方的精心运作,逐渐有效削弱了敌方的攻势。 极简爬虫攻防战纪要     爬虫是构建搜索引擎的基础, 负责抓取网页信息并对网页识别、分类及过滤。我们熟识的电商、搜索、新闻及各大门户网站都有强大的爬虫集群在每...

    elliott_hu 评论0 收藏0
  • 7月份前端资源分享

    摘要:更多资源请文章转自月份前端资源分享的作用数组元素随机化排序算法实现学习笔记数组随机排序个变态题解析上个变态题解析下中的数字前端开发笔记本过目不忘正则表达式聊一聊前端存储那些事儿一键分享到各种写给刚入门的前端工程师的前后端交互指南物联网世界的 更多资源请Star:https://github.com/maidishike... 文章转自:https://github.com/jsfr...

    pingan8787 评论0 收藏0
  • PHPExcel初学纪要

    摘要:流程创建一个文件获取当前的活动标签通过行列坐标获取单元格,并向其插入数据这里有种方式生成文件并输入代码预览等价于除非是根目录设置当前脚本所在目录实例化类获取当前活动标签填充数据方式一姓名性别年龄射可可男男男填充数 流程 创建一个excel文件 获取当前的活动sheet标签 通过行列坐标获取单元格,并向其插入数据(这里有2种方式) 生成文件并输入showImg(https://seg...

    clasnake 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<