18-1 JS 문자열1

 - JS는 텍스트 형식의 데이터는 길이에 상관없이 문자열 형태로 저장된다. 문자열은 페이지 인코딩 방식과 상관 없이 항상 UTF-16 형식을 따릅니다.

---

따옴표

 - 문자열은 작은따옴표(' '), 큰따옴표(" "), 백틱(` `)으로 감싸서 표현한다.

let single = '작은따옴표';
let double = "큰따옴표";
let backticks = `백틱`;

 

  작은따옴표, 큰따옴표는 기능상 차이가 없다. 그런데 백틱엔 다른 기능이 있다. 표현식을 ${...}로 감싸고 문자열 안에 넣으면 해당 표현식을 문자열 중간에 쉽게 삽입할 수 있다. 이 방식을 템플릿 리터럴(template literal)이라고 한다.

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

console.log(`1 + 2 = ${sum(1, 2)}.`); // '1 + 2 = 3'.

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

let guestList = `손님:
 * 메롱
 * 빙구
`;

alert(guestList); // 밑에처럼 출력된다.
/*
손님
 * 메롱
 * 빙구
*/

  작은따옴표나 큰따옴표로 하면 에러가 발생된다.

  백틱은 '템플릿 함수(template function)'에서도 사용된다. func`string` 같이 첫 번째 백틱 바로 앞에 함수 이름(func)을 써주면, 이 함수는 백틱 안의 문자열 조각이나 표현식 평가 결과를 인수로 받아 자동으로 호출된다 이런 기능을 '태그드 템플릿(tagged template)'이라 부르는데, 태그드 템플릿을 사용하면 사용자 지정 템플릿에 맞는 문자열을 쉽게 만들 수 있습니다.

  태그드 템플릿과 템플릿 함수에 대한 자세한 내용은 MDN 문서에서 확인해보세요. 참고로 이 기능은 자주 사용되진 않습니다.

 

---

 

특수 기호

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

let guestList = "손님:\n * John\n * Pete\n * Mary";
alert(guestList); // 손님 리스트를 여러 줄에 걸쳐 작성함
/*
손님:
 * John
 * Pete
 * Mary
*/

따옴표를 이용해 만든 여러 줄 문자열과 백틱을 이용해 만든 여러 줄 문자열은 표현 방식만 다를 뿐 차이가 없다.

let str1 = "Hello\nWorld"; // '줄 바꿈 기호'를 사용해 두 줄짜리 문자열을 만듦

// 백틱과 일반적인 줄 바꿈 방법(엔터)을 사용해 두 줄짜리 문자열을 만듦
let str2 = `Hello
World`;

alert(str1 == str2); // true

자바스크립트엔 줄 바꿈 문자를 비롯한 다양한 ‘특수’ 문자들이 있다.

 

특수 문자 표

특수 문자	설명
\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}" ); // 😍, 웃는 얼굴 기호(긴 유니코드)

모든 특수 문자는 '이스케이프 문자(escape character)'라고도 불리는 역슬래시 (backslash character) \로 시작합니다.

역슬래시는 문자열 내에 따옴표를 넣을 때도 사용할 수 있습니다.

 

---

 

문자열의 길이

 - length 프로퍼티엔 문자열의 길이가 저장되어 있어 문자열의 길이를 확인할 수 있다.

console.log("abc".length); // 3

 

---

 

특정 글자에 접근하기

  문자열 내 특정 위치인 pos에 있는 글자에 접근하려면 [pos] 같이 대괄호를 이용하거나 str.charAt() 메소드를 호출하면 된다.

  근래에는 대괄호를 이용하는 방식을 사용합니다. charAt은 하위 호환성을 위해 남아있는 메서드라고 생각하시면 됩니다.

  두 접근 방식의 차이는 반환할 글자가 없을 때 드러납니다. 접근하려는 위치에 글자가 없는 경우 []는 undefined를, charAt은 빈 문자열을 반환합니다.

let str = `Hello`;

// 첫 번째 글자
console.log(str[0]); // H
console.log(str.charAt(0)); // H
// 마지막 글자
console.log(str[str.length - 1]); // o

console.log(str[1000]); // undefined
console.log(str.charAt(1000)); // ''

 

for..of를 사용하면 문자열을 구성하는 글자를 대산으로 반복 작업을 할 수 있다.

for(let char of "Hello") {
	console.log(char); // H,e,l,l,o를 순차적으로 반환한다.
}

 

---

 

문자열의 불변성

  문자열은 수정할 수 없습니다. 따라서 문자열의 중간 글자 하나를 바꾸려고 하면 에러가 발생한다.

let str = "Hi";
str[0] = 'h';
console.log(atr); // Error: Cannot assign to read only property '0' of string 'Hi'

이런 문제를 피하려면 완전히 새로운 문자열을 하나 만든 다음, 이 문자열을 str에 할당해야한다.

let str = 'Hi';
str = 'h' + str[1];
xonsole.log(str); // 'hi'

 

---

 

대·소문자 변경하기

메서드 toLowerCase()와 toUpperCase()는 대문자를 소문자로, 소문자를 대문자로 변경시켜줍니다.

let str = 'Hello';

console.log(str.toUpperCase()); // 'HELLO'
console.log(str.toLowerCase()); // 'hello'
//글자 하나의 케이스만 변경한다면
console.log(str[0].toLowerCase()); // 'h'

 

 

공부한 곳!! 모던 JavaScript 튜터리얼

바로가기!!

※ 문자열 내용 길어 2에서 계속 18 JS 문자열2