JavaScript 문자열에 대한 일반적인 작업 요약
- 高洛峰원래의
- 2016-12-03 13:58:131035검색
문자열 차단
1.substring()
xString.substring(start,end)
substring()은 가장 일반적으로 사용되는 문자열 차단 방법입니다. 가로챌 시작 위치와 끝 위치인 두 개의 매개변수(매개변수는 음수 값일 수 없음)를 수신합니다. 내용이 시작부터 끝-1까지의 모든 문자인 새 문자열을 반환합니다. end 매개변수(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.slice()
stringObject.slice(시작, 끝)
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는 문자열을 구분하는 데 사용되는 문자(문자열)를 지정합니다. 구분 기호는 문자열이거나 정규 표현식일 수 있습니다. 구분 기호를 생략하면 전체 문자열의 배열이 반환됩니다. 구분 기호가 빈 문자열인 경우 str은 원래 문자열의 각 문자 배열을 반환합니다.
limit는 반환되는 분할 조각 수를 제한하는 정수입니다. 분할 메소드는 여전히 일치하는 각 구분 기호를 분할하지만 반환된 배열은 최대 제한 요소까지만 차단합니다.
let str = 'www.php.cn' str.split('.') // ["www", "php", "cn"] str.split('.', 1) // ["www"] str.split('.').join('') // wwwphpcn
즉, 이 기능은 사용하기 매우 쉽습니다. 문자 차단 요구 사항은 특정 문자에 따라 다릅니다. 위의 세 가지 기능 모두 자신의 위치를 알아야 합니다. 물론 indexOf와 다른 방법을 사용하여 이를 얻을 수 있습니다. 이는 분명히 매우 번거롭지만 분할을 사용하면 더 쉽습니다.
검색 클래스 메서드
1. indexOf() & include()
stringObject.indexOf(searchValue,fromIndex)
indexOf()를 사용합니다. 검색 문자열에서 지정된 문자열 값이 처음으로 나타나는 경우입니다. 두 개의 매개변수를 받을 수 있으며, 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()는 문자열에서 지정된 문자열 값이 처음 나타나는 위치를 검색하는 데 여러 번 사용되지만 Its를 사용하여 시나리오는 지정된 문자열이 문자열에 존재하는지 확인하는 것입니다. 따라서 코드는 다음과 같습니다.
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 () 구문은 indexOf()와 유사합니다. 지정된 하위 문자열 값이 마지막으로 나타나는 위치를 반환하며 검색 순서는 뒤에서 앞으로입니다.
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을 반환합니다.
match() 메소드
let str = 'www.php.cn' console.log(str.search('w')) // 0 console.log(str.search(/j/g)) // 4 console.log(str.search(/\./g)) // 3stringObject.match(substr)
stringObject.match(regexp)
match() 메서드는 문자열 내에서 지정된 값을 검색하거나 하나 이상의 정규 표현식과 일치하는 항목을 찾을 수 있습니다.
매개변수가 전역 일치와 함께 정규식으로 전달되면 match()는 시작 위치에서 여러 번 일치합니다. 끝까지. 결과가 없으면 null이 반환됩니다. 그렇지 않으면 요구 사항을 충족하고 인덱스 및 입력 속성이 없는 모든 하위 문자열을 저장하는 배열이 반환됩니다.
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#"]
다른 메소드
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, 교체)
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 字符串常用操作小结(非常实用)