>  기사  >  웹 프론트엔드  >  JavaScript 문자열 조작 방법 및 브라우저 호환성 예에 대한 자세한 설명

JavaScript 문자열 조작 방법 및 브라우저 호환성 예에 대한 자세한 설명

伊谢尔伦
伊谢尔伦원래의
2017-07-25 14:32:211566검색

slice()

정의: 하나 또는 두 개의 매개변수를 허용합니다. 첫 번째 매개변수는 하위 문자열의 시작 위치를 지정합니다. 두 번째 매개변수는 하위 문자열의 끝 위치를 나타냅니다(끝 위치의 문자 제외). 두 번째 매개변수가 전달되지 않으면 문자열의 길이가 끝 위치로 사용됩니다.

1. 전달된 매개변수가 양수인 경우:


var str ="helloWorld";
// 一个参数,则将字符串长度作为结束位置
alert(str.slice(3)); // "loWorld"
// 两个参数,7位置上的字符为"r",但不包括结束位置的字符
alert(str.slice(3,7)); // "loWo"

2. 전달된 매개변수가 음수인 경우:


slice()方法会将传入的负值与字符串长度相加。
 var str ="helloWorld";
// 一个参数,与字符串长度相加即为slice(7)
alert(str.slice(-3)); // "rld"
// 两个参数,与字符串长度相加即为slice(3,6)
alert(str.slice(3,-4)); // "loW"

3. :

slice() 메서드로 전달된 두 번째 매개변수가 첫 번째 매개변수보다 작은 경우 빈 문자열이 반환됩니다.


var str ="helloWorld";
alert(str.slice(5,3)); // ""

4. IE 호환성

IE8 브라우저 테스트에서는 문제가 없으며 동작이 최신 브라우저와 일치합니다.

substring()

정의: 하나 또는 두 개의 매개변수를 허용하며 첫 번째 매개변수는 하위 문자열의 시작 위치를 지정합니다. 두 번째 매개변수는 하위 문자열의 끝 위치를 나타냅니다(끝 위치의 문자 제외). 두 번째 매개변수가 전달되지 않으면 문자열의 길이가 끝 위치로 사용됩니다.

1. 전달된 매개변수가 양수 값인 경우: 동작은 Slice() 메서드와 동일합니다.


var str ="helloWorld";
// 一个参数,则将字符串长度作为结束位置
alert(str.substring(3)); // "loWorld"
// 两个参数,7位置上的字符为"r",但不包括结束位置的字符
alert(str.substring(3,7)); // "loWo"

2 전달된 매개변수가 음수 값인 경우:

substring() 메서드는 처리합니다. 모든 음수 매개변수는 0으로 변환됩니다. 예를 살펴보겠습니다.


var str ="helloWorld";
// 两个参数,-4会转换为0,相当于substring(3,0) -->即为 substring(0,3)
alert(str.substring(3,-4)); // "hel"

substring() 메서드는 작은 숫자를 시작 위치로 사용하고 큰 숫자를 끝 위치로 사용합니다. 위의 예에서와 같이 substring(3,0)과 substring(0,3)은 동일한 효과를 갖습니다.

4. IE 호환성

IE8 브라우저 테스트에서는 문제가 없으며 동작이 최신 브라우저와 일치합니다.

substr()

정의: 하나 또는 두 개의 매개변수를 허용합니다. 첫 번째 매개변수는 하위 문자열의 시작 위치를 지정합니다. 두 번째 매개변수는 반환되는 문자 수를 나타내는 이전 방법과 약간 다릅니다. 두 번째 인수가 전달되지 않으면 문자열의 길이가 끝 위치로 사용됩니다. 예를 살펴보겠습니다.

1. 전달된 매개변수가 양수 값인 경우:


var str ="helloWorld";
// 一个参数,则将字符串长度作为结束位置
alert(str.substr(3)); // "loWorld"
// 两个参数,从位置3开始截取后面7个字符
alert(str.substr(3,7)); // "loWorld"

2 전달된 매개변수가 음수 값인 경우:

substr() 메서드는 음수를 먼저 추가합니다. 매개변수 음수 두 번째 인수를 0으로 변환하는 문자열의 길이입니다.


var str ="helloWorld";
// 将第一个负的参数加上字符串的长度--->
//即为:substr(7,5) ,从位置7开始向后截取5个字符
alert(str.substr(-3,5)); // "rld"
// 将第二个参数转换为0
// 即为:substr(3,0),即从位置3截取0个字符串,则返回空
alert(str.substr(3,-2)); // ""

3. IE 호환성

substr() 메서드가 음수 값을 전달하면 문제가 발생하고 원래 문자열이 반환됩니다. IE9에서는 이 문제를 해결합니다.

slice, substr 및 substring의 차이점을 소개하겠습니다

우선 둘 다 두 개의 매개변수를 받습니다. Slice와 substring은 시작 위치와 끝 위치(끝 위치 제외)를 받는 반면 substr은 매개 변수를 받습니다. 반환할 문자열의 시작 위치와 길이입니다. 아래 예를 살펴보세요.


 var test = 'hello world';
  alert(test.slice(,));    //o w
  alert(test.substring(,));   //o w
  alert(test.substr(,));   //o world

여기서 주목해야 할 점은 하위 문자열이 두 매개변수 중 더 작은 매개변수를 시작 위치로 사용하고 더 큰 매개변수를 끝 위치로 사용한다는 것입니다.

예:


alert(test.substring(7,4));   //o w

다음으로, 수신된 매개변수가 음수이면 슬라이스는 해당 문자열의 길이를 해당 음수에 추가하고 결과는 매개변수로 사용됩니다. 첫 번째 매개변수를 추가합니다. 문자열 길이를 추가한 결과는 첫 번째 매개변수로 사용됩니다. 하위 문자열은 단순히 모든 음수 매개변수를 0으로 직접 변환합니다. 테스트 코드는 다음과 같습니다.


var test = 'hello world';  
alert(test.slice(-));   //rld  
alert(test.substring(-));  //hello world  
alert(test.substr(-));  //rld  
alert(test.slice(,-));  //lo w  
alert(test.substring(,-)); //hel  
alert(test.substr(,-));  //空字符串

참고: IE에서는 음수 값을 수신하는 substr을 처리하는 중 오류가 발생하여 원래 문자열을 반환합니다.

위 내용은 JavaScript 문자열 조작 방법 및 브라우저 호환성 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.