Javascript 문자열 자르기 방법 3가지

프레임워크를 막론하고 Javascript를 기반으로 사용한다면 문자열을 자르는 작업은 필수적입니다. 이번엔 Javascript 문자열 자르기 방법 3가지를 알아보겠습니다.

Javascript 문자열 자르기

Javascript에서 문자열을 자르는 방법에는 prototype method인 substring과 slice가 있습니다. 과거에는 substr도 사용했었지만 2018년부로 deprecated 된 상태입니다. 아직 웹 표준에서 사라진 건 아니지만, substr()은 앞으로 사용처가 없어지면 명세에서 제거된다고 합니다. 따라서 substr 사용은 지양하고 substring과 slice를 사용하는 편이 좋습니다.

하지만 기존 substr로 작성된 코드를 substring나 slice로 변경하려면 substr에 대해서도 알고 있어야겠죠? 따라서 3가지 방법 모두 살펴보겠습니다. 우선 substr 사용법을 확인한 후에 substring과 slice를 차례대로 살펴보겠습니다.

substr 사용법

MDN Web Docs에서 명백히 Deprecated 되었음을 알리고 있으며 앞으로 사용하지 말 것을 권장하고 있습니다. substr을 substring이나 slice로 리팩터링 하기 위한 이해의 목적으로 먼저 설명해 드립니다.

const str = '123456789';

console.log(str.substr(1, 3));  // 예상결과: "234"
console.log(str.substr(2));     // 예상결과: "3456789"
JavaScript
그림 1. Javascript 문자열 자르기 substr 사용
그림 1. Javascript 문자열 자르기 substr 사용

substr의 문법은 다음과 같습니다. start는 시작인덱스 값이며, length는 길이입니다. parameter가 1개인 경우는 substring의 경우와 동일한 결과 값을 갖습니다.

substr(start)
substr(start, length)
JavaScript

substring 사용법

substring에는 2가지 파라미터를 입력받게 되어 있습니다. 첫째는 시작 index 값이며, 둘째는 끝 index 값입니다. 첫 index는 리턴 값에 포함되며, 둘째 index는 리턴 값에 포함되지 않습니다. 따라서 첫 인덱스부터 마지막 인덱스 직전 값까지 return 값으로 돌려받게 됩니다.

Line 3에서는 1번 인덱스에 해당하는 값인 “2”부터 3번 인덱스 직전인 “3”까지 “23”을 돌려받습니다.

그리고 Line 4에서는 첫 인덱스가 둘째 인덱스보다 크기 때문에 그 둘이 맞바뀝니다. 즉, 결국은 substring(1, 3)으로 처리되므로 Line 3과 동일한 결과가 출력됩니다.

Line 5에서는 시작 인덱스 2부터 문자열 끝까지 반환됩니다.

Line 6에서 음수는 0으로 치환되어 처리됩니다. 즉, substring(0, 3)과 동일한 결과가 됩니다.

Line 7에서 문자열 길이보다 큰 둘째 인덱스의 값은 str.length로 치환되어 처리됩니다. 따라서 substring(5, 9)와 동일한 결과가 됩니다.

여타의 프로그래밍 언어와 마찬가지로 Javascript에서도 인덱스의 첫 값은 0부터 시작하는 점 잊지 마세요.

const str = '123456789';

console.log(str.substring(1, 3));  // 예상결과: "23"
console.log(str.substring(3, 1));  // 예상결과: "23"
console.log(str.substring(2));     // 예상결과: "3456789"
console.log(str.substring(-3, 3)); // 예상결과: "123"
console.log(str.substring(5, 30)); // 예상결과: "6789"
JavaScript
그림 2. js 문자열 자르기 substring 사용
그림 2. js 문자열 자르기 substring 사용

substring의 문법은 아래와 같습니다. indexStart는 추출하고자 하는 첫 인덱스를 의미하며, indexEnd 기준으로 그 직전 인덱스까지 추출합니다.

substring(indexStart)
substring(indexStart, indexEnd)
JavaScript

slice 사용법

slice 사용법은 substring과 거의 같습니다. 하지만 substring에서는 음수를 0으로 처리하는 한편, slice는 python에서의 문자열 처리 방식처럼 음수 사용이 가능합니다. 그리고 indexStart는 항상 indexEnd보다 작은 값을 가져야 합니다.

Line 3은 substr, substring과 사용법이 같습니다. 해당 인덱스부터 끝까지의 값을 반환합니다.

Line 4는 substring과 사용법과 결과가 동일합니다.

Line 5는 substring에서는 9와 4의 자리가 치환되어 Line 4와 동일하게 처리되지만, slice에서는 빈 문자열을 출력합니다.

Line 6은 문자열의 뒤 3번째부터 문자열 끝까지 반환합니다.

Line 7은 문자열의 뒤 11번째부터 문자열의 뒤 6번째 전까지 반환합니다.

const str = 'The quick brown';

console.log(str.slice(10));      // 예상결과: "brown"
console.log(str.slice(4, 9));    // 예상결과: "quick"
console.log(str.slice(9, 4));    // 예상결과: ""
console.log(str.slice(-3));      // 예상결과: "own"
console.log(str.slice(-11, -6)); // 예상결과: "quick"
JavaScript
그림 3. js 문자열 자르기 slice 사용
그림 3. js 문자열 자르기 slice 사용

slice의 문법은 다음과 같습니다.

slice(indexStart)
slice(indexStart, indexEnd)
JavaScript

Refactoring(리팩터링): substr to substring or slice

기존에 substr로 된 코드를 substring이나 slice로 리팩터링하는 방법을 안내해 드립니다. 이미 위에서 각 사용법에 대해 숙지가 됐다면 충분히 할 수 있는 작업입니다. 어떻게 하면 되는지 살펴보겠습니다.

다음 코드와 같이 끝인덱스 값을 첫인덱스 값 + 길이로 처리해 주면 간단히 해결할 수 있습니다.

const str = '123456789';

console.log(str.substr(1, 3));       // 예상결과: "234"
console.log(str.substring(1, 1+3));  // 예상결과: "234"
console.log(str.slice(1, 1+3));      // 예상결과: "234"
JavaScript
그림 3. 리팩터링: substr to substring 및 substr to slice
그림 3. 리팩터링: substr to substring 및 substr to slice

관련 자료

MDN의 substr 페이지, substring 페이지, slice 페이지를 참고했습니다.

같이 읽으면 좋은 글

Javascript 천단위 콤마 찍는 3가지 방법(toLocaleString 추천)

숫자 값에 천단위 콤마를 찍어서 표현해야 할 때가 있으시죠? 방법은 매우 다양합니다만, 시간을 아껴야겠죠. 피해야 할 2가지 방법 간단히 소개하고, 추천하는 방법도 함께 안내해 드리겠습니다.

천단위 콤마 직접 찍어주기

이건 정말 말 그대로 직접 처리해 주는 것입니다. 숫자를 문자열로 변경한 다음 문자열을 판독해서 3자리마다 콤마를 찍어주는 방식이죠. 문제는 직접 찍어주는 함수를 작성하거나 누군가가 제작한 코드를 찾아서 사용해야 한다는 점입니다. 매우 번거롭고 귀찮기 짝이 없습니다. 학습을 위한 목적이 아니라면 절대 하지 말아야 할 작업입니다.

정규식 사용하기

첫번째 방법보다는 조금 세련된 방법으로 정규식을 사용하는 방법이 있습니다. 정규식을 잘 학습해서 활용하는 분들은 손쉽게 해결할 수 있겠지만, 어쨌든 정규식을 작성해야 합니다. 번거로운 과정이 있다는 점은 부인할 수 없습니다.

Number.prototype.toLocaleString 활용

가장 간편한 방법은 바로 toLocaleString을 사용하는 것입니다. 파라미터로 로케일 값을 함께 넣어주시기만 하면 원하는 콤마찍기가 적용됩니다. 그럼 사용 방법 아래에 코드로 적어드립니다.

var price = 12500;
var priceString = price.toLocaleString("ko-KR");
console.log(priceString);
JavaScript

위와 같은 코드를 사용하면 대한민국의 로케일에 맞추어 아래와 같이 천단위 콤마가 찍힙니다.

12,500

다른 국가의 로케일 사용 예시

개발을 하다보면 대한민국의 로케일로 값을 보여주기만 하는 건 아니죠? 그리스에서는 어떻게 값을 표현하는지 한번 확인해 보겠습니다.

var price = 12345.32;
var priceString = price.toLocaleString("el-GR");
console.log(priceString);
JavaScript

엇! 하고 깜짝 놀라는 분들 계실까요? 유럽에서는 우리나라와는 반대로 천단위 콤마 대신에 마침표를 사용하고, 소수점으로 콤마를 사용합니다. 그래서 아래와 같은 결과가 나오게 됩니다.

12.345,32

역시 toLocaleString 사용하셔야겠죠? 특히나 여러 로케일을 다뤄야 하는 경우에 있는 분들이라면, 꼭 toLocaleString 사용해서 귀한 시간 아끼시길 바랍니다. 필요하신 분들께 도움이 되길 바랍니다.

관련 링크

MDN Web Docs의 Javascript 공식 문서 공유해 드립니다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

같이 읽으면 좋은 글

Web Canvas에서 화면에 출력할 문자열의 길이 알아내기

Canvas의 Context에 measureText라는 메서드를 사용하면, TextMetrics라는 객체를 돌려받게 되고, width 속성을 통해서 화면에 그려질 텍스트의 크기를 알아낼 수 있다.

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var text = ctx.measureText('12345');
console.log(text.width);
JavaScript

참고자료

https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Drawing_text