Growth from the root - Vanilla JavaScript - 문자열

이형준·2023년 4월 17일

문자열

📃 자바스크립트에는 글자 하나만 저장할 수 있는 별도의 자료형이 없음, 데이터의 길이의 상관없이 문자열 형태로 나타남.

따옴표

📃 작은따옴표, 큰따옴표, 백틱으로 감쌀 수 있음
(ex)

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

✏️ 작은, 큰 사이에 기능상 차이는 없음, 그러나 백틱은 표현식을 ${...}로 감싸고 이를 백택으로 감싼 문자열 중간에 넣어주면 표현식을 중간에 쉽게 넣을 수 있음, 이런 방식을 템플릿 리터럴이라고 함.

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

✅ 백틱을 사용하면 문자열을 여러줄에 걸쳐 작성 가능.

let guestList = `손님:
* 형준
* 승찬
* 혁준
`;

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

특수 기호

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

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

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

✏️ 따옴표로 만든 여러 줄 문자열 = 백틱으로 만든 여러 줄 문자열

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

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

alert(str1 == str2); // true

문자열의 길이

alert(`abc`.length); // 3

특정 글자에 접근하기

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

let str = 'Hello';

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

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

문자열의 불변성

📃 문자열은 수정 할 수 없음.

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

대소문자 변경하기

📃 toLowerCase() : 대문자를 소문자로
toUpperCase() : 소문자를 대문자로 변경

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

✅ 글자 하나의 케이스만 변경하는 것도 가능.

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

부분 문자열 찾기

str.indexOf

📃 str.indexOf(substr, pos) : 문자열 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)

includes, startsWith, endsWith

📃 str.includes(substr, pos) : 문자열 str의 부분 문자열 substr이 어디에 있냐에 따라 반환, 위치정보 말고 포함여부 확인할 때 적합함.
찾으면 true, 못 찾으면 false를 반환

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

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

📃 str.startsWith와 str.endsWith는 메서드 이름 그대로 문자열 str이 특정 문자열로 시작하는지(start with) 여부와 특정 문자열로 끝나는지(end with) 여부를 확인할 때 사용함.

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

부분 문자열 추출하기

str.slice(start [, end])

문자열의 start부터 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번째부터 끝까지

start와 end는 음수가 될 수도 있음, 음수를 넘기면 문자열 끝에서부터 카운팅을 시작

let str = "stringify";

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

str.substring(start [, end])

start와 end 사이에 있는 문자열을 반환, slice와 아주 유사하지만 start가 end보다 커도 괜찮다는 데 차이, substring은 음수 인수를 허용하지 않습니다. 음수는 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) ); // "" (빈 문자열)

str.substr(start [, length])

start에서부터 시작해 length 개의 글자를 반환, substr은 끝 위치 대신에 길이를 기준으로 문자열을 추출한다는 점

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

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