JavaScript 文字列に対する一般的な操作の概要

文字列インターセプション

1. substring()

xString.substring(start,end)

substring() は、2 つのパラメーターを受け取ることができます (パラメーターは負の値にすることはできません)。それぞれインターセプトされる開始位置と終了位置を指定し、内容が start から end-1 までのすべての文字である新しい文字列を返します。終了パラメータ(end)を省略した場合は、開始位置から最後までインターセプトすることを意味します。

let str = 'www.php.cn'
console.log(str.substring(0,3)) // www
console.log(str.substring(0)) //www.php.cn
console.log(str.substring(-2)) //www.php.cn(传负值则视为0)

2.lice()

stringObject.slice(start, end)

slice() メソッドは、substring() メソッドとよく似ています。位置と終了位置。違いは、slice() のパラメーターが負の値である場合、パラメーターは文字列の末尾から開始する位置を指定することです。つまり、-1 は文字列の最後の文字を指します。

let str = 'www.php.cn'
console.log(str.slice(0, 3)) // www
console.log(str.slice(-3, -1)) // co
console.log(str.slice(1, -1)) // wwwphp.co
console.log(str.slice(2, 1)) // '' (返回空字符串,start须小于end)
console.log(str.slice(-3, 0)) // '' (返回空字符串,start须小于end)

3. substr()

stringObject.substr(start,length)

substr() メソッドは、文字列の開始添え字から指定された数の文字を抽出できます。戻り値は、stringObject の先頭から始まる長さの文字 (start が指す文字を含む) を含む文字列です。長さが指定されていない場合、返される文字列には stringObject の先頭から末尾までの文字が含まれます。また、start が負の数の場合は、文字列の末尾から数えることを意味します。

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

4.split()

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

separatorは文字列を分割するために使用する文字(文字列)を指定します。区切り文字には文字列または正規表現を使用できます。 区切り文字を省略した場合は、文字列全体の配列が返されます。 separator が空の文字列の場合、str は元の文字列の各文字の配列を返します。

limit は、返される分割フラグメントの数を制限する整数です。 Split メソッドは引き続き一致する各セパレーターを分割しますが、返される配列は制限された要素までしかインターセプトしません。

let str = 'www.php.cn'
str.split('.') // ["www", "php", "cn"]
str.split('.', 1) // ["www"]
str.split('.').join('') // wwwphpcn

多くの場合、この関数は非常に使いやすいと言われていますが、文字インターセプトの要件は特定の文字に依存しており、上記の 3 つの関数はすべてその位置を知る必要があります。もちろん、indexOf や他のメソッドを使用して取得することもできますが、これは明らかに非常に面倒ですが、split を使用すると簡単になります。

Search クラスのメソッド

1.indexOf() & include()

stringObject.indexOf(searchValue,fromIndex)

indexOf() は、指定された文字列値が文字列内で最初に出現する位置を取得するために使用されます。 2 つのパラメータを受け取ることができます。searchValue は検索する部分文字列を表し、fromIndex は検索の開始位置を表します。省略した場合、検索は開始位置から実行されます。

let str = 'www.php.cn'
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 言語の include() ははるかに洗練されており、文字列が別の文字列に含まれているかどうかを判断するために include() メソッドが使用されることを知っておく必要があります。文字列の場合は true を返し、それ以外の場合は false を返します。

str.includes(searchString[,position])

searchString 検索される部分文字列。位置はオプションです。部分文字列の検索を開始する現在の文字列のインデックス位置は、デフォルトでは 0 です。 include() では大文字と小文字が区別されることに注意してください。

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

2. lastIndexOf()

stringObject.lastIndexOf(searchValue,fromIndex)

lastIndexOf() 構文は、指定された部分文字列値が出現する最後の位置を返します。順序は後ろから前です。

let str = 'www.php.cn'
console.log(str.lastIndexOf('.')) // 12
console.log(str.lastIndexOf('.', 1)) // -1
console.log(str.lastIndexOf('.', 5)) // 3
console.log(str.lastIndexOf('.', 12)) // 12
search()
stringObject.search(substr)
stringObject.search(regexp)

search() メソッドは、文字列内の指定された部分文字列を取得するか、正規表現に一致する部分文字列を取得するために使用されます。最初に一致した部分文字列の開始位置を返します。一致するものがない場合は -1 を返します。

let str = 'www.php.cn'
console.log(str.search('w')) // 0
console.log(str.search(/j/g)) // 4
console.log(str.search(/\./g)) // 3

match() メソッド

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

match() メソッドは、文字列内の指定された値を取得したり、1 つ以上の正規表現を検索したりできますマッチング。

渡されたパラメータがグローバル一致を実行しない部分文字列または正規表現の場合、match() メソッドは先頭から一致を実行します。一致する結果がない場合は、null が返されます。それ以外の場合、配列の 0 番目の要素には一致するテキストが格納されます。さらに、返される配列には、一致するテキストと stringObject の開始文字インデックスを表す 2 つのオブジェクト属性も含まれます。参照 (つまり、元の文字列)。

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 が返されます。それ以外の場合は、要件を満たすすべての部分文字列を格納し、インデックスと入力属性を持たない配列が返されます。

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.php.cn'
console.log(str.replace('w', 'W')) // www.php.cn
console.log(str.replace(/w/, 'W')) // www.php.cn

   

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

let str = 'www.php.cn'
console.log(str.replace(/w/g, 'W')) // www.php.cn
toLowerCase() & toUpperCase()
stringObject.toLowerCase()
stringObject.toUpperCase()

   

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

let str = 'wwww.php.cn'
console.log(str.toLowerCase()) // www.php.cn
console.log(str.toUpperCase()) // WWW.PHP.CN

   

模板字符串

这个也是 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 字符串常用操作小结(非常实用)