표현 방식

문자형은 세 가지 방식으로 표현 가능합니다.
작은따옴표 ''
큰따옴표 ""
역따옴표 ``

백틱의 유용성

(1) 자동 줄바꿈이 됩니다.
(2) string interpolation: 데이터를 ${}로 쉽게 연결합니다.

let name = "John";
alert( `Hello, ${name}!` ); // Hello, John!
alert( `Hello, $${name}!` ); // Hello, $John!

(3) tag function
첫 번째 파라미터로 백틱 안에 있는 문자열들을 ${}기준으로 잘라서 배열을 만들고
나머지는 ${}의 값들을 배열로 만들어 함수의 매개변수로 넘겨줄 수 있습니다.

const setDecimalSeperators = function (strs, ...args) {
  return args.reduce(function (p, c, i) {
    return p + strs[i] + (c + '').replace(/\d{1,3}(?=(\d{3})+(?!\d))/g, '$&,')
  }, '') + strs[strs.length - 1]
}
const res = setDecimalSeperators`이 사과는 하나에 ${2000}원이고, 총 ${1234567}개를 구입하시면 총 ${2000 * 1234567}원 이에요.`
console.log(res)

raw는 문자열 그대로 보여주는 것입니다.

console.log(String.raw `Hello\nWorld!`); // Hello\nWorld!

문자형변환

String(true);

문자열 다루기

문자열 길이

const str = 'Coding';
console.log(str.length); // 6

특정 글자에 접근하기

str[pos] - 접근하려는 위치에 글자가 없으면 undefined
str.charAt(pos) - 접근하려는 위치에 글자가 없으면 빈 문자열
for..of문

let str = `Hello`;

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

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

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

문자열의 일부 수정은 안되고, 전체 문자열을 갈음하거나 str.replace('바꿀 대상 문자','바꿀 문자')를 활용하여 바뀐 문자열을 새로 반환하는 것은 가능합니다.

// wrong
let str = 'Hi';

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

// good
let str = 'Hi';
str = 'h' + str[1]; // 문자열 전체를 교체함

alert( str ); // hi

const str = "ppoooyyyoy";
const newStr = str.replace('ppoo', 'x');
console.log(newStr); / xoyyyoy

대소문자 변경하기

str.toLowerCase() - 소문자로 변경
str.toUpperCase() - 대문자로 변경

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

부분 문자열 찾기

(1) str.indexOf(substr[, pos]) : str에 해당 substr이 있는지 pos번 부터 순서대로 검색. 적합한 문자열의 위치를 반환하고, 없을 경우 -1을 반환합니다.
(2) str.lastIndexOf(substr[, pos]) : str에 해당 substr이 있는지 pos번 부터 뒤에서부터 순서대로 검색

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)

if문과 함께 사용

let str = "Widget with id";

if (str.indexOf("Widget") != -1) {
    alert("찾았다!"); // 의도한 대로 동작합니다.
}

(3) str.includes(substr[, pos]) : str안에 substr이 있으면 true // 없으면 false

let str = "Widget with id";

if (alert( "Widget with id".includes("Widget") ); // ") != -1) {
    alert("찾았다!"); // 의도한 대로 동작합니다.
}

(4) str.startsWith(substr) : str이 substr로 시작하는지 여부
str.endsWith(substr) : str이 substr로 끝나는지 여부

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

부분 문자열 추출

(1) str.slice(start[, end]) : [문자열 복사] start위치부터 end위치(end 미포함)까지 문자열을 반환합니다. 2번째 인수가 생략되면 start부터 문자열 끝까지 반환합니다. 인수가 음수면 끝에서부터 계산합니다.

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

(2) str.substring(start[, end]) : start위치부터 end위치(end 미포함)까지 문자열을 반환합니다. 음수를 허용하지 않으며 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) ); // "" (빈 문자열)

(3) str.substr(start[, length]) : start부터 length개의 글자를 반환합니다. 음수는 끝에서부터 계산합니다.

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

(4) str.trim() : 앞, 뒤 공백을 제거. trimLeft(), trimRight()도 있습니다.

let str = '        Hello World!      ';
console.log(str.trim()); // Hello World!

(5) str.split("seperator"[, count]) : seperator를 기준으로 count 개수 만큼 자릅니다. count가 없으면 전체 분할합니다.

let str = "ppoooyyyoy";
console.log(str.split("p")); // ["", "", "oooyyyoy"]

문자열 비교

자바스크립트 문자열은 UTF-16으로 인코딩되어 있습니다. 이 표는 숫자와 문자열이 매칭되어 있는데 이 숫자들을 비교하여 문자열의 크기를 비교할 수 있습니다.

(1) str.codePointAt(0) : 글자의 숫자 코드를 반환합니다. 숫자 값을 알 수 있겠죠.

alert( "z".codePointAt(0) ); // 122
alert( "Z".codePointAt(0) ); // 90

(2) String.fromCodePoint(code) : 숫자 코드에 대응하는 글자를 반환합니다.

String.fromCodePoint(90) // Z

(3) str.localeCompare(str2) : str과 str2의 크기를 비교하여 str이 작으면 음수, 크면 양수, 같으면 0을 반환합니다.

alert( 'Österreich'.localeCompare('Zealand') ); // -1

특이한 문자

서로게이트 쌍

자바스크립트가 만들어질 당시에는 서로게이트 쌍이 존재하지 않아 자바스크립트는 이를 잘 처리하지 못합니다. 그러나 codePointAt, fromCodePoint메서드는 그 이후에 나온 메서드이므로 이를 잘 처리할 수 있습니다.

발음 구별 기호

utf-16테이블에서는 글자 하나 당 발음 구별 기호를 다 만들기엔 너무 많아서 유니코드 문자를 조합하여 발음구별기호를 만들 수 있게 하였습니다. 그러나 이도 유니코드 조합순서에 따라 같은 글자인 지 못알아보는 문제가 있습니다.
글자와 유니코드의 조합을 하나의 문자로 인식하게 만들어주는 메소드는 str.normalize()를 사용하면 되지만, 이도 완벽하진 않습니다.

alert( "S\u0307\u0323".normalize().length ); // 1
alert( "S\u0307\u0323".normalize() == "\u1e68" ); // true