Javascript String Methods : slice(), substring(), includes(), startsWith(), trim(), replace()…….
프론트엔드(React, Vue, Angular)와 백엔드(Node.js)가 모두 자바스크립트를 사용하는 시대에 들어서니 자바스크립트의 기초가 몇 배는 더 중요해진 것 같습니다.
자바스크립트의 문법 중 문자열(String) 관련 함수는 참 쓸 일이 많으면서도 가볍게 여겨져 쉽게 외워지지 않는 슬픈 함수 중 하나인 것 같습니다.😢
문자열 관련 함수는 한 번 외워두면 반복 학습할 일이 많으므로 첫 단추만 잘 꿰면 될 것 같습니다.
그럼 문자열 관련하여 사용 빈도가 높은 함수인 slice(), substring(), includes(), startsWith(), trim(), replace(), indexOf(), test() 함수에 대해 알아보겠습니다.
slice 함수는 위치(인덱스)를 매개변수로 전달하여 원하는 문자열을 추출합니다.
시작 위치(필수)와 종료 위치(옵션)를 전달하며, 시작 위치만 전달하는 경우 시작 위치부터 문자열 끝까지 추출합니다.
0은 순방향으로 첫 번째(앞에서 1번 째), 음수인 -1은 역방향으로 첫 번째(뒤에서 1번 째)를 나타냅니다.
const myWord = 'primavera'; myWord.slice(0,5); // 'prima' myWord.slice(-4); // 'vera' myWord.slice(3); // 'mavera' myWord.slice(3,1); // '' -> slice함수는 시작인덱스가 종료인덱스보다 크면 빈 값을 반환
substring 함수도 slice와 마찬가지로 위치(인덱스)를 매개변수로 전달하여 원하는 문자열을 추출합니다.
기본적인 작동 방식은 같으나 slice와 달리 시작인덱스가 종료인덱스보다 큰 경우에는 자동으로 두 값의 위치를 변경하여 함수를 실행합니다.
또한 substring은 매개변수에 음수를 넣으면 이 값을 0으로 인식합니다.
따라서 (3, -1)을 전달하게 되면 (3, 0)으로 인식합니다. (3, 0)은 시작 인덱스가 더 크므로 위치를 변환하여 (0, 3)의 값을 계산한 결과를 반환합니다.
함수명이 비슷한 substr의 경우 ‘위치’와 ‘추출할 문자의 수’를 파라미터로 전달하는 함수입니다.
const myWord = 'invierno'; myWord.substring(3); // 'ierno' myWord.substring(1,3); // 'nv' myWord.substring(3,1); // 'nv' -> 시작이 종료인덱스보다 크면 자동으로 위치 변경 후 함수를 실행 myWord.substring(3,-1); // 'inv' -> 음수는 0, 시작인덱스와 종료인덱스는 위치 변경 후 계산 myWord.substring(-4); // 'invierno' -> 음수는 0, 시작인덱스만 전달하여 0부터 끝까지 계산 myWord.substr(1,3); // 'nvi' -> 시작인덱스 1부터 문자 3개를 추출
includes 함수는 지정한 문자열의 포함 여부를 확인합니다.
매개변수로 문자열(필수)과 위치인덱스(옵션)를 전달하며, 반환값은 true 또는 false 입니다.
문자열 내 지정 문자열 확인은 물론 배열 내 빈 값을 확인하는 용도로도 사용할 수 있습니다.
const myWord = 'alegria';
myWord.includes('le'); // true
myWord.includes('i'); // true
myWord.includes('rio'); // false
const myArray = ['dream','','king'];
myArray.includes(''); // true -> myArray[1]이 빈 값이므로 true. 배열 내 빈 값을 찾는 용도
myArray.includes('dream'); // true -> myArray[0]의 값과 일치
myArray.includes('drea'); // false -> 배열 내 값과 정확하게 일치하는 경우에만 true를 반환
startsWith 함수도 문자열의 포함 여부를 확인하는 함수라고 볼 수 있습니다.
startsWith와 함께 문자열만 전달하면 0 인덱스부터 시작하여 해당 문자열의 존재 여부를 확인하여 BOOLEAN 값을 반환합니다.
마찬가지로 endsWith는 끝나는 문자열을 비교합니다.
const mySentence = 'cafe con leche';
mySentence.startsWith('cafe'); // true
mySentence.startsWith('fe'); // false
mySentence.startsWith('fe',2); // true
mySentence.endsWith('eche'); // true
trim 함수는 문자열 양 끝의 공백을 제거하는 함수입니다.
문자열 변환 과정이나 실수로 보이지 않는 공백을 삽입하게 되면 문자열 비교 시 겉으로는 동일하지만 결과는
false를 반환하므로 이 trim 함수를 사용하면 문제를 해결할 수 있습니다.
문자열 양 끝의 공백, 탭, 줄바꿈 문자(/n)를 제거하며, 문자열 양 끝이 아닌 부분에는 효과가 없습니다.
const mySentence = ' la casa de papel '; mySentence.trim(); // 'la casa de papel' const mySentence = ' el amor \n'; mySentence.trim(); // 'el amor'
replace 함수는 문자열에서 변경할 기존문자를 찾아 변경문자로 변경합니다.
문자열에서 매개변수로 전달한 기존문자가 여러 개 존재하는 경우 첫 번째로 탐색한 문자열만 변경합니다.
예를 들어, ‘my_name_is_Ron’에서 ‘_’문자를 모두 공백으로 변경하기 위해 replace(‘_’,’ ‘) 함수를 사용해도 결과는 ‘my name_is_Ron’이 반환됩니다.
따라서 문자열에서 해당하는 문자를 모두 변경하고 싶은 경우에는 정규표현식을 사용하면 됩니다.
const mySentence = 'my name is:Ron';
mySentence.replace(':',' '); //'my name is Ron'
const mySentence = 'my_name_is_Ron';
mySentence.replace('_',' '); // 'my name_is_Ron'
//정규표현식 사용해서 모든 문자 변경하기
mySentence.replace(/_/g, ' '); // 'my name is Ron'
indexOf 함수는 전달하는 문자의 위치를 반환합니다.
이 기능은 원하는 문자열의 앞 또는 뒤에서 문자열을 자를 때 유용하게 사용할 수 있습니다.
예를 들어, ‘Z001-03’이라는 문자열에서 뒤의 ’03’만 추출하고 싶은 경우 indexOf로 ‘-‘ 문자열의 위치를 찾고 해당 위치의 +1 위치부터 끝까지 문자열을 잘라내면 원하는 값을 가져올 수 있습니다.
만약 같은 문자가 여러 개 존재하는 경우 첫 번째 문자의 위치를 반환하며, 두 번째 매개변수에 시작 위치를 전달하면 시작 위치부터 검색을 시작합니다(시작 위치를 전달하더라도 반환 값은 전체 문자열에서 몇 번째인지를 전달합니다).
뒤에서부터 검색을 시작하는 함수는 lastIndexOf이며, 뒤에서부터 첫 번째로 나오는 문자의 위치를 반환합니다(반환 값은 해당 문자가 앞에서부터 몇 번째인지를 반환합니다).
전달하는 문자가 존재하지 않으면 -1을 반환합니다.
const mySentence = 'Z001-03';
mySentence.indexOf('-'); // 4
mySentence.substring(mySentence.indexOf('-')+1); // '03'
mySentence.indexOf('D'); // -1
const mySentence = 'Z001-03-02';
mySentence.indexOf('-'); // 4
mySentence.indexOf('-', 5); // 7
mySentence.lastIndexOf('-') // 7
test 함수는 정규표현식과 함께 사용하여 매개변수로 전달하는 문자열의 유효성을 확인합니다.
비밀번호에 알파벳, 특수문자 등 포함여부 확인이나 생년월일 형식에 알파벳 등 불필요한 문자의 포함 여부를 효과적으로 확인할 수 있습니다.
const mySentence = /a/;
const myWord = 'baby';
mySentence.test(myWord); // true
/\d/.test('cookie'); // false \d는 숫자(0~9)를 나타내는 정규표현식
/\d/.test('cookie1'); // true
const typedError = /[ㄱ-ㅎㅏ-ㅣ]/gi;
const inputData = '김ㅊ치와 나물';
typedError.test(inputData); // true
이 외에도 다양한 함수들이 많고 또 여러 요구에 맞춰 새롭고 편리한 함수가 계속 나오기 때문에 끊임없는 관심과 업데이트 관련하여 모니터링이 필요할 것 같습니다.