JavaScript 문자열 작업 방법인 슬라이스, 하위 문자열, 하위 문자열 및 해당 IE 호환성_javascript 기술에 대한 심층 분석

문자열을 가로챌 때 substr(), substring(), 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 브라우저로 테스트한 결과 문제가 없으며 동작이 최신 브라우저와 일치합니다.

하위 문자열()

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

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()와 substring()의 동작은 일관됩니다. substr() 메소드는 두 번째 매개변수에서 쉽게 혼동됩니다

음수 매개변수를 전달할 때, Slice() 메소드는 문자열의 길이를 더하는 것인데, 이는 일반적인 생각과 일치합니다. substring()의 두 번째 매개변수를 0으로 변환하면 문제가 발생하기 쉬우며, 시작 위치가 변경하기 쉽습니다. substr() 메서드는 음수 값을 사용할 때 IE 호환성 문제를 발생시킵니다.

결론적으로 말하자면, 저는 일반적으로 Slice() 메소드를 사용하는 것을 권장합니다.

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 

다음으로, 수신된 매개변수가 음수인 경우, 슬라이스는 해당 문자열의 길이를 해당 음수에 더하고 결과는 매개변수로 사용됩니다. substr은 첫 번째 매개변수를 추가한 결과만 됩니다. 문자열의 길이. 첫 번째 매개변수로서 하위 문자열은 단순히 모든 음수 매개변수를 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로 수신된 음수 값을 처리하는 데 오류가 있으며 원래 문자열을 반환합니다.