본문 바로가기

Javascript/Javascript중급

문자열 자르기

반응형

문자열을 자르는 방법은 크게


문자열에서 시작 위치와 끝 위치 인덱스를 지정해 그 사이의 문자열을 가져오는 방법과

시작위치에서부터 길이만큼 문자열을 자겨오는 방법

2가지로 나눌 수 있습니다.


시작 위치와 끝 위치를 지정해 가져오는 방법은 slice(), substring() 메서드가 있고

시작위치에서 길이만큼 가져오는 방법은 substr() 메서드가 있습니다.

substring() 과 substr()을 자주 혼동하기 때문에 주의해야 합니다.



slice()


문자열의 시작 인덱스와 끝 인덱스 사이의 범위에 있는 문자열을 반환합니다.

인덱스는 0에서 시작하며, 0은 문자열의 첫번째 문자가 됩니다.

끝 인덱스 위치 문자는 제외됩니다.

즉 시작 인덱스 위치부터 끝 인덱스 전까지의 문자열을 반환합니다.


const str1 = 'This is the only one story';

console.log(str1.slice(8,11)); //'the'를 반환.

//시작 인덱스가 음수인 경우 빈 문자열 반환.
console.log(str1.slice(-8,11)); //'the'를 반환

//시작 인덱스가 끝 인덱스보다 크거나 같은 경우 빈 문자열을 반환.(끝 인덱스가 반드시 커야 함).
console.log(str1.slice(104)); //'the'를 반환

//파라메터가 1개만 있을 경우 시작 인덱스 값이 됨. 끝 인덱스가 생략된 것으로 끝 인덱스는 문자열 길이값이 사용됨.
console.log(str1.slice(30)); //''를 반환

// 끝 인덱스는 마이너스 값을 사용할 수 있음. 마이너스 값일 경우 (문자열 길이 + 마이너스값) 이 끝 인덱스 값이 됨.
console.log(str1.slice(0,-10)); // 'This is the only' 를 반환.

//마지막 인덱스+1(문자열 길이값) 보다 큰 값은 마지막 인덱스+1 로 대체.
console.log(str1.slice(8,100)); // 'the only one story' 를 반환.

//파라메터가 없을 경우 전체 문자열을 반환
console.log(str1.slice()); // 'This is the only one story' 를 반환.





substring()


slice() 와 아래 2가지 특징을 제외하면 기본 사용법은 동일합니다.


인덱스 값을 음수로 사용할 수 없습니다.음수 입력시 0으로 대체됩니다.

시작 인덱스가 끝 인덱스보다 큰 경우 파라메터를 바꿔 끝 인덱스를 시작 인덱스로, 시작 인덱스를 끝 인덱스로 바꿔서 문자열을 가져옵니다.


const str1 = 'This is the only one story';

console.log(str1.substring(8,11)); // 'the'를 반환.
console.log(str1.substring(11,8)); // 'the'를 반환.

//파라메터 값이 음수이므로 0으로 먼저 변경 후, 순서를 바꿔 substring(0,11) 문자열 반환.
console.log(str1.substring(11,-8)); // 'This is the'를 반환

//파라멘터 순서를 바꿔 substring(4,10) 문자열을 반환.
console.log(str1.substring(104)); // ' is th'를 반환.

//파라메터가 1개만 있을 경우 시작 인덱스 값이 됨. 끝 인덱스가 생략된 것으로 끝 인덱스는 문자열 길이값이 사용됨.
console.log(str1.substring(30)); // ''를 반환

// 끝 인덱스는 마이너스 값을 사용할 수 있음. substring(0,0) 문자열을 반환.
console.log(str1.substring(0,-10)); // '' 를 반환.

//마지막 인덱스+1(문자열 길이값) 보다 큰 값은 마지막 인덱스+1 로 대체.
console.log(str1.substring(8,100)); // 'the only one story' 를 반환.

//파라메터가 없을 경우 전체 문자열을 반환
console.log(str1.substring()); // 'This is the only one story' 를 반환.





substr()


slice(), substring() 과 두번째 파라메터의 용도가 다릅니다.

substr() 은 첫번째 파라메터가 시작 인덱스로 같지만, 두번째 파라메터는 가져올 문자열 길이값입니다.


위의 예제와 같은 문자열을 기준으로 


const str1 = 'This is the only one story';


//8번째 인덱스부터 11개의 문자열을 가져옵니다.

console.log(str1.substr(8,11)); // 'the only on' 를 반환.


substr() 은 2가지 중요한 특징이 있습니다.


길이에 음수는 사용할 수 없으며, 음수가 입력되면 0으로 변경됩니다. 따라서 빈 문자열이 반환됩니다.

시작 인덱스는 음수를 사용할 수 있습니다. 음수가 될 경우 문자열 끝에서 부터 음수값만큼 왼쪽으로 이동한 위치가 시작 위치가 됩니다. 즉, 음수만큼 왼쪽으로 계속 이동합니다. 문자열 길이를 음수로 시작 인덱스에 입력하면 시작 인덱스 0과 같은 문자열이 반환됩니다.


const str1 = 'This is the only one story';

console.log(str1.substr(8,11)); // 'the only on'를 반환.
console.log(str1.substr(11,8)); // ' only on'를 반환.

//파라메터 값이 음수이므로 0으로 먼저 변경하므로 빈 문자열을 반환
console.log(str1.substr(11,-8)); // ''를 반환

//시작 인덱스가 음수이므로 문자열 끝에서 10만큼 윈쪽으로 이동한 위치부터 8개의 문자열을 반환
console.log(str1.substr(-108)); // ' one sto'를 반환.

//파라메터가 1개만 있을 경우 시작 인덱스 값이 됨. 길이가 생략된 것으로 문자열 길이값이 적용됨. 
// 따라서 문자역 시작 인덱스부터 문자열 끝까지가 반환됨.
console.log(str1.substr(10)); // 'e only one story'를 반환

// 끝 인덱스는 마이너스 값을 사용할 수 있음. substr(0,0) 문자열을 반환.
console.log(str1.substr(0,-10)); // '' 를 반환.

//마지막 인덱스+1(문자열 길이값) 보다 큰 값은 마지막 인덱스+1 로 대체.
console.log(str1.substr(8,100)); // 'the only one story' 를 반환.

//파라메터가 없을 경우 전체 문자열을 반환
console.log(str1.substr()); // 'This is the only one story' 를 반환.



반응형

닫기