[JS] JavaScript의 문자열 정리 (규칙, 메서드, 템플릿)

문자열 다루기 - MDN
문자열 제대로 다루기 -MDN

문자열의 개요

자바스크립트에는 문자열이라는 원시 타입이 존재한다. 문자열에는 단어, 문장등을 저장할 수 있다.

문자열의 선언 방법

문자열을 작성할 때에는 따옴표('), 쌍따옴표("),백틱(`)으로 문자열을 반드시 묶어줘야 한다. 이 때 따옴표는 문자열의 시작과 끝에 사용하며, 반드시 쌍을 이뤄야 하고, 같은 문자여야 한다.

잘못된 예시

const badString1 = This is a test;
const badString2 = 'This is a test; // "종료되지 않은 문자열 리터럴" 에러가 발생함
const badString3 = This is a test';
const badString4 = 'This is a test";

따옴표로 묶이지 않은 텍스트는 변수 이름, 속성 이름, 예약어 등으로 간주되어 오류가 발생한다.

문자열에 따옴표 포함하기

문자열에 실제 따옴표를 포함하려면 다른 문자 중 하나를 사용해서 문자열을 선언하거나, 따옴표를 이스케이프해야한다.

let str1 = "I told her 'go away'" // "안에 ' 쓰는 거 가능
let str2 = 'I told her "go away"' // '안에 " 쓰는 거 가능
let str3 = "I told her \"go away\"" // "안에 " 쓰는 거 불가능 -> \" 쓰기

문자열의 속성

Indices (인덱스)

자바스크립트에서 문자열은 인덱싱(indexing) 되어 있어, 문자열의 각 문자에 대응하는 숫자를 통해 참조할 수 있다. 인덱스는 0부터 시작하며, 문자의 위치가 문자열의 오른쪽으로 갈수록 증가한다. 참조하기 위해서는 대괄호 표기법을 사용한다. 대괄호 안에 원하는 문자의 인덱스를 포함시키면 된다. 이 때, 문자열의 길이를 초과하는 인덱스에 접근하려고 하면, 에러가 발생하지 않고undefined가 반환된다.

let dinner = "chicken"; // 인덱스는 0 ~ 6까지 존재
console.log(dinner[0]); // c 출력
console.log(dinner[99]); // undefined 출력

length

length 프로퍼티를 사용해서 문자열들의 길이를 확인할 수 있다. 이 프로퍼티는 문자열의 총 문자 수를 반환한다.

let browserType = "mozilla";
console.log(browserType.length); // 7이 출력됨

이름의 길이에 따른 순서 정렬, 혹은 사용자가 작성한 이름이 특정 길이 이상일 때 알림을 주기 위해 사용할 수 있다.

문자열의 메서드

메서드는 아래와 같은 방식으로 사용할 수 있다.

thing.method();

여기서는 thing에 문자열을 넣으면 되고, method에는 사용하고자 하는 메서드의 이름을 적어주면 된다. 그리고 메서드는 호출해야하는 함수이므로 ()도 반.드.시 붙여줘야 한다. 또한 메서드를 연달아 사용하는 것도 가능하다.

thing.method().method();

thing.method(arg);

이 때 문자열의 대부분 메서드들은 인수를 받는데, 인수란 메서드로 전달되어서 메서드의 동작을 변경하는 입력값을 말한다.

메서드의 종류

메서드에는 파괴적 메서드와 비파괴적 메서드가 존재한다.

• 파괴적 메서드: 원본 데이터를 수정한다. 따라서 호출 후 원래 문자열의 값이 변하게 된다.
• 비파괴적 메서드: 원본 데이터를 변경하지 않고, 원본 데이터를 수정해 만든 새 문자열을 반환한다. 따라서 원본 데이터는 유지된다.

문자열은 원시 타입으로 변경이 불가능한 값이기 때문에 모든 메서드가 비파괴적이다. 따라서 변경된 새로운 문자열을 사용하려면 따로 변수를 선언해서 저장해야 한다. 문자열을 배열로 바꾼 후에는 파괴적 메서드도 사용할 수 있다.

Casing (toUpperCase, toLowerCase)

문자열 메소드 toLowerCase()와 toUpperCase() 는 문자열을 가져와 그것을 모두 각각 대문자나 소문자로 바꾸는 메서드이다. 두 메서드는 새로운 문자열을 반환한다.

• toUpperCase: 기존 메서드의 문자를 전부 대문자로 변환한 새로운 문자열을 반환한다.
• toLowerCase: 기존 메서드의 문자를 전부 소문자로 변환한 새로운 문자열을 반환한다.

"hello".toUpperCase(); // HELLO
"HELLO".toLowerCase(); // hello

trim()

trim 메서드는 문자열의 처음과 끝에 있는 공백을 제거해주는 메서드이다. 중간 공백은 제거하지 않는다. 이 메서드는 공백이 제거된 새로운 문자열을 반환한다.

let text = "   hello, i'm ha eun   ";
text.trim(); // "hello, i'm ha eun"

indexOf(arg)

indexOf는 인수를 받는 메서드로, 인수로 문자열(한 문자도 가능) 을 넣으면, 해당 문자열이 시작하는 인덱스를 반환해준다. 이 때 인수로 전달하는 문자열을 하위 문자열이라고 한다. 만약에 하위 문자열이 문자열 내부에 존재하지 않는다면 -1을 반환한다. 또한 하위 문자열이 여러 개 존재하는 경우, 맨 첫 번째 하위 문자열의 위치만을 반환한다.

"cat&dog".indexOf("cat"); // 0을 반환
"cat&dog".indexOf("dog"); // 4를 반환
"cat&dog".indexOf("puppy"); // -1을 반환
"ha ha".indexOf("ha"); // 0만 반환

slice(args)

slice는 문자열의 일부를 추출하여 이를 새로운 문자열로 반환하는 메서드이다.

slice(indexStart)
slice(indexStart, indexEnd)

형태는 위와 같다. indexStart는 반환될 부분 문자열에 포하모딜 첫 번째 문자의 인덱스를 나타내고,
indexEnd는 반환될 부분 문자열에서 제외될 첫 번째 문자열의 인덱스를 나타낸다. indexEnd가 생략된 경우 문자열의 끝까지 추출한다.

"hello world!".slice(6, 11); // "world" 반환

replace(args)

str.replace(pattern, replacement)

replace는 두 개의 인수를 받으며, 첫 번째 문자열을 두 번째 문자열로 대체한 새로운 문자열을 반환하는 메서드이다.

repeat(arg)

str.repeat(count);

repeat 메서드는 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환하는 메서드이다.

"abc".repeat(-1); // RangeError
"abc".repeat(0); // ''
"abc".repeat(1); // 'abc'
"abc".repeat(2); // 'abcabc'

유용한 문자열 템플릿

템플릿 리터럴은 최근에 생긴 구문으로 엄청나게 유용하다. 템플릿 문자열을 사용하면 문자열 안에 표현식을 내장할 수 있다.

• 템플릿 리터럴에는 백틱(`)기호를 사용하며 다중 줄 문자열 작성이 가능하다.
• 백틱으로 둘러싸인 문자열 내부에 $기호와 중괄호 쌍{ }으로 이루어진 특정 시퀀스를 사용하면 중괄호 안에 쓰는 모든 건 표현식으로 평가 된다. 즉, ${expression}을 문자열 내부에 포함시키면 된다.

console.log(`오늘 점심: ${12000 + 3000}원`); // 오늘 점심: 15000원