문자열

템플릿 리터럴

작은 따옴표와 큰 따옴표의 기능상 차이는 없지만 백틱에는 특별한 기능이 있는데 바로 표현식을 사용 가능하다는 것이다. 이런 방식을 바로 템플릿 리터럴이라고 이야기 한다.

function sum(a, b){
	return a + b
}

alert(`1 + 2 = ${sum(a, b).`}; // 1 + 2 = 3.

추가로 백틱을 이용하면 문자열을 여러줄에 걸쳐 작성할 수도 있다.

let guestList = `손님:
 * John
 * Pete
 * Mary
`;

alert(guestList); // 손님 리스트를 여러 줄에 걸쳐 작성함

특수기호

줄바꿈문자라고 불리는 특수기호 \\n을 사용하면 큰따옴표나 작은따옴표로도 여러줄 문자를 만들 수 있다.

let guestList = "손님:\\n * John\\n * Pete\\n * Mary";

다양한 특수문자 모음

\n	줄 바꿈
\r	캐리지 리턴(carriage return). Windows에선 캐리지 리턴과 줄 바꿈 특수 문자를 조합(\r\n)해 줄을 바꿉니다. 캐리지 리턴을 단독으론 사용하는 경우는 없습니다.
\', \"	따옴표
\\	역슬래시
\t	탭
\b, \f, \v	각각 백스페이스(Backspace), 폼 피드(Form Feed), 세로 탭(Vertical Tab)을 나타냅니다. 호환성 유지를 위해 남아있는 기호로 요즘엔 사용하지 않습니다.
\xXX	16진수 유니코드 XX로 표현한 유니코드 글자입니다(예시: 알파벳 'z'는 '\x7A'와 동일함).
\uXXXX	UTF-16 인코딩 규칙을 사용하는 16진수 코드 XXXX로 표현한 유니코드 기호입니다. XXXX는 반드시 네 개의 16진수로 구성되어야 합니다(예시: \u00A9는 저작권 기호 ©의 유니코드임).
\u{X…XXXXXX}(한 개에서 여섯 개 사이의 16진수 글자)	UTF-32로 표현한 유니코드 기호입니다. 몇몇 특수한 글자는 두 개의 유니코드 기호를 사용해 인코딩되므로 4바이트를 차지합니다. 이 방법을 사용하면 긴 코드를 삽입할 수 있습니다.

유니코드 사용한 예시

alert( "\\u00A9" ); // ©
alert( "\\u{20331}" ); // 佫, 중국어(긴 유니코드)
alert( "\\u{1F60D}" ); // 😍, 웃는 얼굴 기호(긴 유니코드)

문자열 내에 따옴표 넣기(feat. 어퍼스트로피)

alert( 'I\\'m the Walrus!' ); // I'm the Walrus!

역슬래시를 출력하고싶다면

alert( `역슬래시: \\\\` ); // 역슬래시: \\

문자열의 길이

alert( `My\\n`.length ); // 3

특정 글자에 접근하기

let str = `Hello`;

// 첫번째 글자
alert( str[0] ); // H
alert( str.charAt(0) ); // H

// 마지막 글자
alert( str[str.length - 1] ); // o

요즘은 대괄호를 많이 씀 왜냐면 접근하려는 글자의 위치가 없는 경우에 대괄호는 undefined를 뱉고 charAt()은 빈 문자열을 주기 때문이다.

for…of

문자열을 구성하는 글자를 대상으로 반복작업을 할 수 있다.

for (let char of "Hello"){
	alert(char); // H,e,l,l,o (char는 순차적으로 H, e, l, l, o가 됩니다.)
}

문자열의 불변성

문자열은 수정할 수가 없어서 글자 하나를 바꾸려고 하면 에러가 발생한다.

실습

let str = 'Hi';

str[0] = 'h'; // Error: Cannot assign to read only property '0' of string 'Hi'
alert( str[0] ); // 동작하지 않습니다.

이러한 에러를 피해서 새로운 문자를 넣고 싶다면 완전히 새로운 문자열을 하나 만든 다음 이 문자열을 str에 할당하면 된다.

let str = 'Hi';

str = 'h' + str[1]; // 문자열 전체를 교체함
alert( str ); // hi

대소문자 변경하기

toLowerCase()와 toUpperCase

alert( 'Interface'.toUpperCase() ); // INTERFACE
alert( 'Interface'.toLowerCase() ); // interface

글자의 하나의 케이스만 변경하기

alert( 'Interface'[0].toLowerCase() ); // 'i'

문자열 찾기

문자열에서 부분 문자열을 찾는 방법은 여러가지가 있다.

str.indexOf

이 메서드는 문자열 str의 pos에서부터 시작해 부분 문자열 substr이 어디에 위치하는지 찾아준다. 원하는 부분 문자열을 찾으면 위치를 반환하고 그렇지 않으면 -1을 반환한다.

let str = 'Widget with id';

alert( str.indexOf('Widget') ); // 0, str은 'Widget'으로 시작함
alert( str.indexOf('widget') ); // -1, indexOf는 대·소문자를 따지므로 원하는 문자열을 찾지 못함

alert( str.indexOf("id") ); // 1, "id"는 첫 번째 위치에서 발견됨 (Widget에서 id)

두번째 인수인 pos를 지정하지 않으면 처음부터 찾고 지정한다면 지정한 단어부터 찾을 수 있다.

let str = 'Widget with id';

alert( str.indexOf('id', 2) ) // 12

문자열 전체를 대상으로 무엇인가 하고 싶다면 반복문 안에 indexOf를 사용하면 된다. 반복문이 하나씩 돌 때마다 검색 시작 위치가 갱신되면서 indexOf가 새롭게 호출된다.

let str = 'As sly as a fox, as strong as an ox';

let target = 'as' // 이거 찾아보자

let pos = 0;

while (true) {
	let foundPos = str.indexOf(target, pos);
	if (foundPos == -1) break;
	
	alert( `위치: ${foundPos}` );
	pos = foundPos + 1; // 찾은 target 이후로 검색
}

이걸 짧게 줄이면..

let str = "As sly as a fox, as strong as an ox";
let target = "as";

let pos = -1;
while((pos = str.indexOf(target, pos + 1) != -1){
	alert( `위치: ${pos}` )
}

주의점

글자가 가장 앞에 있어서 0을 반환하는데 조건문에서 0은 false이기 때문에 조건문으로 들어가지 않는다.

let str = "Widget with id";

if (str.indexOf("Widget")) {
	alert("우리가 의도한 동작이 아니야")
}

이 부분을 수정하고 싶다면 -1과 비교해야한다.

let str = "Widget with id";

if (str.indexOf("Widget") != -1) {
	alert("찾았다!")
}

inclueds

str에 부분 문자열 substr이 있는지에 따라서 true 혹은 false를 반환한다. 위치 정보는 필요하지 않고 포함여부만 궁금할 때 사용한다.

alert( "Widget with id".includes("Widget") ); // true

alert( "Hello".includes("Bye") ); // false

두번째 인수를 남기면 해당 위치부터 부분 문자열을 검색한다.

alert( "Widget".includes("id") ); // true
alert( "Widget".includes("id", 3) ); // false, 세 번째 위치 이후엔 "id"가 없습니다.

startsWith, endsWith

말 그대로 해당 문자로 시작하는지 혹은 끝나는지를 검사할 수 있다.

alert( "Widget".startsWith("Wid") ); // true, "Widget"은 "Wid"로 시작합니다.
alert( "Widget".endsWith("get") ); // true, "Widget"은 "get"으로 끝납니다.

부분 문자열 추출

• subString
• substr
• slice

slice(start [, end])

문자열의 start 부터 end까지(end는 미포함)를 반환한다.

let str = "stringify";
alert( str.slice(0, 5) ); // 'strin', 0번째부터 5번째 위치까지(5번째 위치의 글자는 포함하지 않음)
alert( str.slice(0, 1) ); // 's', 0번째부터 1번째 위치까지(1번째 위치의 자는 포함하지 않음)

두번째 인수가 생략된 경우엔, 명시한 위치부터 문자열 끝까지를 반환한다.

let str = "stringify";
alert( str.slice(2) ); // ringify, 2번째부터 끝까지

음수로 문자열 끝에서부터 카운팅을 할 수도 있다.

let str = "stringify";

// 끝에서 4번째부터 시작해 끝에서 1번째 위치까지
alert( str.slice(-4, -1) ); // gif

subString(start [, end])

start와 end 사이에 있는 문자열을 반환한다.

subString과 slice는 매우 유사하지만 start가 end 보다 커도 괜찮다는 것에 차이가 있다.

let str = "stringify";

// 동일한 부분 문자열을 반환합니다.
alert( str.substring(2, 6) ); // "ring"
alert( str.substring(6, 2) ); // "ring"

// slice를 사용하면 결과가 다릅니다.
alert( str.slice(2, 6) ); // "ring" (같음)
alert( str.slice(6, 2) ); // "" (빈 문자열)

subString은 음수 인수를 허용하지 않는다. 음수는 0으로 처리된다.

substr(start, [, length])

start 에서 시작해 length 개의 글자를 반환한다.

substr은 끝 위치 대신에 길이를 기준으로 추출한다는 점에서 substring과 slice의 차이가 있다.

let str = "stringify";
alert( str.substr(2, 4) ); // ring, 두 번째부터 글자 네 개

첫번째 인수가 음수라면 뒤에서부터 개수를 센다.

let str = "stringify";
alert( str.substr(-4, 2) ); // gi, 끝에서 네 번째 위치부터 글자 두 개

메서드 요약

메서드	추출할 부분	문자열 음수 허용 여부(인수)
slice(start, end)	start부터 end까지(end는 미포함)	음수 허용
substring(start, end)	start와 end 사이	음수는 0으로 취급함
substr(start, length)	start부터 length개의 글자	음수 허용