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

字符串截取

1. substring()

xString.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(0)) //www.jeffjade.com
console.log(str.substring(-2)) //www.jeffjade.com (传负值则视为0)

2. slice()

stringObject.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()

stringObject.substr(start,length)

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

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

4. split()

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

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

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

let str = 'www.jeffjade.com'
str.split('.') // ["www", "jeffjade", "com"]
str.split('.', 1) // ["www"]
str.split('.').join('') // wwwjeffjadecom

话说这个函数真心好用,很多时候的字符截取需求,就是依赖于某个字符;而以上三个函数都需知道其位置。我们当然可以借助 indexOf 等方法获取,很显然这很繁琐;而借助 split 则显得更轻而易举。

查找类方法

1. indexOf() & includes()

stringObject.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('.', 12)) // -1

虽然 indexOf()用来检索指定的字符串值在字符串中首次出现的位置 ,然而很多时候,使用它的场景在于判断字符串中是否存在指定的字符串;因此代码就会如此:

if (str.indexOf('yoursPecifiedStr') !== -1) {
// do something
}

要知道在这样的场景下,ES6 语言中的includes()就显得更优雅许多;includes() 方法用于判断一个字符串是否被包含在另一个字符串中,如果是返回true,否则返回false。

str.includes(searchString[, position])

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

'Blue Whale'.includes('blue'); // returns false
'乔峰乔布斯乔帮主'.includes('乔布斯'); // returns true
if (str.includes('yoursPecifiedStr')) {
// do something(这样写是不是更为人性化?Yeah,这是一个更趋向人性化的时代嘛)
}

2. lastIndexOf()

stringObject.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

3. search()

stringObject.search(substr)
stringObject.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

4. match()方法

stringObject.match(substr)
stringObject.match(regexp)

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

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

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。否则则会返回一个数组,数组中存放所有符合要求的子字符串,并且没有index和input属性。

let str = '#1a2b3c4d5e#'
console.log(str.match(/h/g)) //返回null
console.log(str.match(/\d/g)) //返回["1", "2", "3", "4", "5"]

其他方法

replace()方法

stringObject.replace(regexp/substr,replacement)

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

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

let str = 'www.jeffjade.com'
console.log(str.replace('w', 'W')) // Www.jeffjade.com
console.log(str.replace(/w/, 'W')) // Www.jeffjade.com

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

let str = 'www.jeffjade.com'
console.log(str.replace(/w/g, 'W')) // WWW.jeffjade.com

toLowerCase() & toUpperCase()

stringObject.toLowerCase()
stringObject.toUpperCase()

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

let str = 'www.jeffjade.com'
console.log(str.toLowerCase()) // www.jeffjade.com
console.log(str.toUpperCase()) // WWW.JEFFJADE.COM

模板字符串

这个也是 ES6 才引入进来的新语法,来解决传统输出String模板的蹩脚问题;其功能之强大,设计之贴心,着实令人得到极大满足感,好如久旱逢甘霖一般的舒畅。更何况,在当今 MVVM 前端框架大行其道的时代,使用 ES6 语法也是不用自己个儿去操心兼容性问题,对于塑造 Dom Template 更是如虎添翼,令人爱不释手。

对于她的使用,阮一峰在ECMAScript 6 入门有过详细的描述以及示例,在此就不赘述。只需要明白我们可以像这样去操作了,试问爽否?

function ncieFunc() {
return "四海无人对夕阳";
}
var niceMan = "陈寅恪";
var jadeTalk = `一生负气成今日 \n ${ncieFunc()} ,
语出 ${niceMan} 的《忆故居》。
`
console.log(jadeTalk)

运行之,Chrome Console 输出结果如下:

    一生负气成今日
四海无人对夕阳 ,
语出 陈寅恪 的《忆故居》。

组合其法

细看 JavaScript 提供的String Api,还是有蛮多的,也有些许废弃的,也有将在未来版本会出来的;这其中不乏很多也挺有用的,譬如: charAt(x)、charCodeAt(x)、concat(v1, v2,…)、fromCharCode(c1, c2,…) 等等,还有 ES6 对字符串的扩展,比如 字符串的遍历器接口,repeat() 等等,这可以参见 ES6-string,这里就不多赘述。

在实际代码生产中,很多时候需要用这些提供的基本方法,来打出一套组合拳,以解决其需求所需。很显然又可以借助 prototype 属性,将自造的各路拳法,其归置于 String 对象,然后天亮啦。这一步就看个人喜好了,这里抛出一二段,以引大玉。

字符串反转

String.prototype.reverse = function () {
return this.split('').reverse().join('')
}

去除空白行

String.prototype.removeBlankLines = function () {
return this.replace(/(\n[\s\t]*\r*\n)/g, '\n').replace(/^[\n\r\n\t]*|[\n\r\n\t]*$/g, '')
}

String转化为数组

1, 转化为一维数组

场景是根据某子字符串转化,直接就用 split 就好;如果转换规则不统一,那么请自求多福吧。

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

2, 转化为二维数组

String.prototype.removeBlankLines = function () {
return this.replace(/(\n[\s\t]*\r*\n)/g, '\n').replace(/^[\n\r\n\t]*|[\n\r\n\t]*$/g, '')
}
String.prototype.strTo2dArr = 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.strTo2dArr('\n', ','))

运行之,输出结果如下:

[ [ ‘渺渺钟声出远方’, ‘依依林影万鸦藏。’ ],
[ ‘一生负气成今日’, ‘四海无人对夕阳。’ ],
[ ‘破碎山河迎胜利’, ‘残馀岁月送凄凉。’ ],
[ ‘松门松菊何年梦’, ‘且认他乡作故乡。’ ] ]

JavaScript 字符串常用操作的更多相关文章

  1. JavaScript 字符串常用操作纪要

    JavaScript 字符串用于存储和处理文本.因此在编写 JS 代码之时她总如影随形,在你处理用户的输入数据的时候,在读取或设置 DOM 对象的属性时,在操作 Cookie 时,在转换各种不同 Da ...

  2. JavaScript字符串常用操作函数之学习笔记

    字符串简介 使用英文单引号或双引号括起来,如:’Hello’,”World”,但是不能首尾的单引号和双引号必须一致,交错使用,如果要打印单引号或者双引号,可以使用转义字符\’(单引号),\”(双引号) ...

  3. javascript中字符串常用操作整理

    javascript中字符串常用操作整理 字符串的操作在js中非常频繁,也非常重要.以往看完书之后都能记得非常清楚,但稍微隔一段时间不用,便会忘得差不多,记性不好是硬伤啊...今天就对字符串的一些常用 ...

  4. Python 基礎 - 字符串常用操作

    字符串常用操作 今天就介紹一下常用的字符串操作,都是以 Python3撰寫的 首字母變大寫 #!/usr/bin/env python3 # -*- coding:utf-8 -*- name = & ...

  5. Python学习笔记五:字符串常用操作,字典,三级菜单实例

    字符串常用操作 7月19日,7月20日 ,7月22日,7月29日,8月29日,2月29日 首字母大写:a_str.capitalize() 统计字符串个数:a_str.count(“x”) 输出字符, ...

  6. javascript中字符串常用操作总结、JS字符串操作大全

    字符串的操作在js中非常频繁,也非常重要.以往看完书之后都能记得非常清楚,但稍微隔一段时间不用,便会忘得差不多,记性不好是硬伤啊...今天就对字符串的一些常用操作做个整理,一者加深印象,二者方便今后温 ...

  7. javascript中字符串常用操作总结

    String对象属性 (1) length属性 length算是字符串中非常常用的一个属性了,它的功能是获取字符串的长度.当然需要注意的是js中的中文每个汉字也只代表一个字符,这里可能跟其他语言有些不 ...

  8. js--javascript中字符串常用操作总结、JS字符串操作大全

    字符串的操作在js中非常频繁,也非常重要.以往看完书之后都能记得非常清楚,但稍微隔一段时间不用,便会忘得差不多,记性不好是硬伤啊...今天就对字符串的一些常用操作做个整理,一者加深印象,二者方便今后温 ...

  9. PHP字符串常用操作

    常用操作有: PHP中有两个内建的函数:count() 和sizeof(),可以实现得到数组的长度 count($sttr);数组长度 字符串长度:strlen(string $a); 判断是否相同, ...

随机推荐

  1. The communication of Linux Server and Localtion

    当用Secure CRT远程登录服务器时,若建立本地与服务器间文件自由传输的机制,我们就可以实现远程办公.具体方法如下: 1. 确定远程服务器的IP.可以通过Secure CRT进行远程登录. 2.在 ...

  2. [Xamarin] 從Xamarin中呼叫 *.jar 的 library -建立.jar篇 (转帖)

    嗯,這篇我們來聊聊如何從Xamarin 中來呼叫,已經包好的.jar ,首先因為要讓測試順利,我們開一個Android Java 的專案 當然是Eclipse ,然後我們簡簡單單寫一個測試用的libr ...

  3. 建库和表的脚本.sql

    1.一直都记不太清楚,需要新建一个数据库和表的脚本是怎样的,恰巧今天翻到了,特地记录下来,希望以后用的时候记住吧! create database testdb00; use testdb00; cr ...

  4. 24种设计模式--状态模式【State Pattern】

    现在城市发展很快,百万级人口的城市一堆一堆的,那其中有两个东西的发明在城市的发展中起到非常重要的作用:一个是汽车,一个呢是...,猜猜看,是什么?是电梯!汽车让城市可以横向扩展,电梯让城市可以纵向延伸 ...

  5. 201521123022 《Java程序设计》 第九周学习总结

    1.本章学习总结 2. 书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 Q1.1 截图你的提交结果(出现学号) Q1.2 自己以前编写的代码中经常出现什么异常.需要捕获吗(为什么)?应如何 ...

  6. scrapy获取页面信息

    本例子用命令行调试的方式,演示如何获取页面的特定信息: 0) 示例页面 1) 使用scrapy shell获取目标页面: scrapy shell http://bj.lianjia.com/ersh ...

  7. Windows下Oracle 11g创建数据库

    以前开发的时候用得比较多的是mysql和sql server,oracle用的比较少,用起来比较生疏,mysql和sql server用起来比较类似,就oracle的使用方式和他们不同,oracle在 ...

  8. javac编译提示错误需要为 class、interface 或 enum

    HelloWorld.java:1: 需要为 class.interface 或 enum锘缝ublic class HelloWorld{^1 错误 这个错误出现的原因主要是在中文操作系统中,使用一 ...

  9. APP 渠道推广【摘自网络】

    渠道的合作方式无非三种,一种是付费合作,那很简单,谈好价格付钱.第二种是免费,主要是就是首发,还有就是跟渠道的运营小伙伴搞好关系让帮忙给个免费的位置等,第三种是活动奖品合作,简而言之,就是渠道商会逢年 ...

  10. JDBC处理文本和二进制文件

    JDBC支持文本(CLOB)和二进制(BLOB)文件的处理,比如要往数据库里存取文章或者图片.这都是用流的思想来解决的. 来两个Demo看看JDBC是怎么操作文本和二进制文件的. CLOB: pack ...