[자바스크립트] 문자열 및 관련 메소드

 

문자열

• 자바스크립트엔 글자 하나만 저장할 수 있는 별도의 자료형이 없다.
• 문자와 문자열의 자료형은 하나로 같다

 

 

백틱

• 문자열은 작은 따옴표, 큰 따옴표, 백틱으로 감쌀 수 있다.
• 백틱으로 감싼 문자열 중간에 표현식을 ${…}사용하면 문자열 중간에 쉽게 삽일할 수 있다.
• 이를 템플릿 리터럴(template literal)이라고 부른다.

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

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

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

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

alert(guestList); 

/* 출력
손님:
 * John
 * Pete
 * 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( 'I\'m the Walrus!' ); // I'm the Walrus!
alert( `I'm the Walrus!` ); // I'm the Walrus!

 

 

문자열 길이

• length 프로퍼티엔 문자열의 길이가 저장된다.

alert( `My\n`.length ); // 3, \n은 ‘특수 문자’ 하나로 취급되어서 길이가 3이다.

 

⚠️ length는 프로퍼티이다.

• 다른 언어에서 문자열의 길이를 구할 때 length()를 사용했지만 자바스크립트에서는 length는 함수가 아니라 숫자가 저장되는 프로퍼티이다. 따라서 뒤에 괄호를 붙일 필요가 없다.

 

 

str.charAt(pos)

• 문자열 내 특정 위치 접근

let str = `Hello`;

// 첫 번째 글자
alert( str[0] ); // H //대괄호 방식
alert( str.charAt(0) ); // H

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

• charAt은 하위 호환성 때문에 남아 있는 메서드라서 대괄호 방식을 이용하면 된다.
• 대괄호 방식과 charAt방식의 차이는
  • 접근하려는 위치에 글자가 없으면 대괄호는 undefined를 반환
  • charAt은 빈 문자열을 반환한다.

  let str = `Hello`;
  
  alert( str[1000] ); // undefined
  alert( str.charAt(1000) ); // '' (빈 문자열)

 

for..of

• 문자열을 구성하는 글자들을 차례대로 출력
• 파이썬의 for word in str와 같은 방식
• 다만 자바스크립트에서는 in이 아닌 of를 사용

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

 

 

문자열의 불변성

• 문자열은 수정할 수 없다.
• 수정하려면 새로운 문자열을 만들고 문자열을 할당해줘야 한다.

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'

 

 

부분 문자열 찾기

1. str.indexOf(substr, pos)

• str의 pos 위치부터 시작해서 부분 문자열 substr이 어디에 위치하는지를 찾아준다.(pos는 선택적으로 사용)
• 찾으면 위치를 반환하고, 없으면 -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)

//---------------------------------
let str = 'Widget with id';

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

• 문자열 전체에 있는 문자열을 검사하고 싶을 때

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

let target = 'as'; // as를 찾아봅시다.

let pos = 0;
while (true) {
  let foundPos = str.indexOf(target, pos);
  if (foundPos == -1) break; // 찾고하는 문자가 없으면 -1을 반환하기 때문에 break 

  alert( `위치: ${foundPos}` );
  pos = foundPos + 1; // 다음 위치를 기준으로 이동
}

• 아래처럼 코드를 줄일 수 있다.

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}` );
}

 

🔔 if문의 조건식에서 indexOf를 사용할 때 주의점

let str = "Widget with id";

if (str.indexOf("Widget")) {
    alert("찾았다!"); // 의도한 대로 동작하지 않는다.
    //왜?
    // str.indexOf("Widget")은 0을 반환하는데 if문에서 0은 false니까 동작하지 않는다.
}

//해결 방법
let str = "Widget with id";

if (str.indexOf("Widget") != -1) { // -1만 반환이 안된다면 문자열 내에 위치하고 있으니까 아래 코드가 실행된다.
    alert("찾았다!"); // 동작
}

 

🔔 str.lastIndexOf(substr, position)

• 문자열 끝에서부터 부분 문자열을 찾는 것이다.
• 알고리즘 문제 풀 때 유용하게 사용될 거 같다.

let anyString = 'Brave new world';

console.log('시작점으로부터 처음 만나는 w의 위치는 ' + anyString.indexOf('w'));
// logs 8
console.log('끝점으로부터 처음 만나는 w의 위치는 ' + anyString.lastIndexOf('w'));
// logs 10
console.log('시작점으로부터 처음 만나는 "new"의 위치는 ' + anyString.indexOf('new'));
// logs 6
console.log('끝점으로부터 처음 만나는 "new"의 위치는 ' + anyString.lastIndexOf('new'));
// logs 6

 

2. 비트 NOT 연산자를 사용한 기법

• 비트 NOT 연산자는 피연산자를 32비트 정수로 바꾼 후(소수부는 모두 버림) 모든 비트를 반전시키는 것
• 이 기법은 오래된 코드에서 만날 수 있기 때문에 이런 것이 있다는 정도만 알고 넘어가는 것이 좋다.

alert( ~2 ); // -3, -(2+1)과 같음
alert( ~1 ); // -2, -(1+1)과 같음
alert( ~0 ); // -1, -(0+1)과 같음
alert( ~-1 ); // 0, -(-1+1)과 같음


//  ~str.indexOf("...")를 사용하면 코드의 길이를 줄일수 있다.
// 위와 같은 패턴은 부분 문자열인지 확인하는 코드인지만 알고 넘어가자.
let str = "Widget";

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

 

3. includes, startsWith, endsWith

str.includes(substr, pos)

• 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"가 없다

 

str.startsWith, str.endsWith

• 문자열 str이 특정 문자열로 시작하는지, 특정 문자열로 끝나는지의 여부 확인

alert( "Widget".startsWith("Wid") ); // true
alert( "Widget".endsWith("get") ); // true

 

 

부분 문자열 추출하기

1. str.slice(start [, end]]

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

let str = "stringify";
alert( str.slice(0, 5) ); // 'strin', 0번째부터 4
alert( str.slice(0, 1) ); // 's', 0번째부터 0번째 위치까지
alert( str.slice(2) ); // ringify, 2번째부터 끝까지
alert( str.slice(-4, -1) ); // gif, 끝은 -1부터 시작 된다. 끝에서 4번째부터 끝 2번째까지.

 

2. str.substring(start [, end])

• start와 end 사이에 있는 문자열을 반환한다.
• start값이 end값보다 크면 자동적으로 작은 숫자가 시작 위치로, 큰 숫자가 종료 위치고 바뀌어서 실행된다.
• 다만 음수는 0으로 처리되기 때문에 음수 인수를 허용하지 않는다.

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(2, 4) ); // ring, 두 번째부터 글자 네 개
alert( str.substr(-4, 2) ); // gi, 끝에서 네 번째 위치부터 글자 두 개

 

 

문자열 추출 관련 메서드 요약

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

• 어떤 걸 써야 할지 모르겠다면 slice만 외워놓고 사용해도 충분하다!

 

 

문자열 비교하기

• 모든 문자열은 UTF-16을 사용해 인코딩하여 모든 글자와 숫자 형식의 코드와 매칭 된다.

 

1. str.codePointAt(pos)

• pos에 위치한 글자의 코드를 반환

// 글자는 같지만 케이스는 다르므로 반환되는 코드가 다르다.
alert( "z".codePointAt(0) ); // 122
alert( "Z".codePointAt(0) ); // 90

 

2. charCodeAt()

• 문자열을 유니코드로 변환
• string.charCodeAt(index)

let str = "abc"

console.log(str.charCodeAt(0)) // 97
console.log(str.charCodeAt(1)) // 98
console.log(str.charCodeAt(2)) // 99

 

3. string.fromCharCode()

• 유니코드를 문자열로 변환할 때 사용

 

4. String.fromCodePoint(code)

• 숫자 형식의 code에 대응하는 글자를 만들어 준다.

alert( String.fromCodePoint(90) ); // Z

 

5. string.localeCompare

• 문자열과 문자열을 비교하고, 정렬순서에 따라 비교를 할 수 있다.
• string이 compareString보다 앞이 있으면 음수를 반환, 뒤에 있으면 양수를 반환, 동등하면 0을 반환
• string.localeCompare(compareString)

alert('a'.localeCompare('b')); // -1
alert('b'.localeCompare('a')); // 1
alert('b'.localeCompare('b')); // 0

 

 

문자열 관련 메서드

str.trim()

• 문자열 앞과 끝의 공백 문자를 제거해준다.

const str = "    Hello    &       World!!    "
console.log(str.trim()) // Hello    &       World!!

 

str.repeat(n)

• 문자열을 n번 반복해준다.

 

string.replace("찾을 문자", "치환할 문자")

• 문자열 치환
• 왼쪽부터 발견한 문자열 하나만 치환.

let sentence = "Hello World!"
let answer = sentence.replace("World", "Coding!");
console.log(answer) // Hello Coding!!

 

strin.slplit("문자")

• 문자를 기준으로 문자열을 잘라서 배열에 담아서 반환해주는 함수

const str = 'The quick brown fox jumps over the lazy dog.';

const words = str.split(' ');
console.log(words[3]);
// 출력 : "fox"

const chars = str.split('');
console.log(chars[8]);
// 출력 : "k"

const strCopy = str.split();
console.log(strCopy);
// 출력 : Array ["The quick brown fox jumps over the lazy dog."]

 

string.concat()

• 문자열과 문자열을 합친 값을 리턴해준다.

string1.concat(string2, string3[,..., stringN])

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

let first = "Hello"
let second = "World!!"
console.log(first.concat(second)) //HelloWorld!!

 

 

📌 참고

• 모던 JavaScript 튜토리얼
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/lastIndexOf
• https://opentutorials.org/course/50/91
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String