JavaScript - 문자열

문자열이란?

• 자바스크립트엔 글자 하나만 저장할 수 있는 별도의 자료형이 없고 텍스트 형식의 데이터는 길이에 상관없이 문자열 형태로 저장된다.
• 문자열은 큰따옴표("")나 작은따옴표('') 및 백틱(``)으로 둘러싸인 문자의 집합을 의미한다.
• ""와 ''의 차이는 없지만 반드시 같은 것으로 끝나야한다.
• length를 가지며 문자열[index] 형태로 접근할 수 있다.

선언

let str1 = 'samll';  // small
let str2 = "big";   // big
let str3 = `backtick`;	// backtick
let str4 = 'strange";  //  SyntaxError: Invalid or unexpected token

문자열의 길이

• length 속성을 사용하면 문자열의 길이를 알 수 있다.

let str1 = 'abcde';
str1.length;  // 5

특정 문자에 접근

• 대괄호[index]를 이용하여 접근이 가능하다.

let str2 = 'abcde';
str2[1];  // 'b'

• 접근하려는 위치에 문자가 없는 경우 undefined를 반환한다.

let str3 = 'abcde';
set3[5];  // undefined

• 접근은 가능하지만 변경은 불가능하다.

let str4 = 'abcde';
str4[1] = 'a';  // 'a'
str4;           // 'abcde' 

문자열 위치 찾기

let str5 = 'Hello world';
str5.indexOf('e');  // 1
str5.indexOf('lo');  // 3

• 찾지 못한 경우 -1을 반환한다.

str5.indexOf('aa');  // -1

문자열이 포함 되었는지 확인

let str6 = 'Hello world';
str6.includes('el');  // true
str6.includes('le');  // false

• 하나의 문자열이 다른 문자열에 포함되어 있는지를 판별하고 결과를 true 또는 false로 반환한다.
• indexOf가 이 기능을 포함하므로 indexOf가 많이 사용된다.

문자열 분리

let str7 = 'html javascript css react'
str7.split(' ')  // ['html', 'javascript', 'css', 'react']

• 구분자를 기준으로 분리하여 배열로 반환한다.

문자열 자르기

1. str.substr();

let str8 = 'javascript';
str8.substr(2, 4);  // 'vasc'
str8.substr(5);     // 'cript'

• substr(start, length) 또는 substr(start)

2. str.substring();

let str9 = 'javascript';
str9.substring(5);     // 'cript'
str9.substring(2, 4);  // 'va'
str9.substring(-3, 5);  // 'javas'
str9.substring(4, -1);	// 'java'
str9.substring(1, 0);	// 'j'

• substring(start, end) 또는 substring(start)
• 주의할 점은 end-1 까지 문자열을 자른다
• start, end에 -를 입력하면 해당 값은 0으로 치환된다.
• end 위치에 - 또는 0인 경우 start와 end의 값이 바뀐다.

3. str.slice()

let str10 = 'javascript';
str10.slice(5);  // 'cript'
str10.slice(3, 6);  // 'asc'
str10.slice(3, -5); // 'as'
str10.slice(-6, 7); // 'scr'

• slice(start, end) 또는 slice(start)
• substring과 마찬가지로 end-1 까지 문자열을 자른다.
• -를 자유롭게 사용할 수 있으며 문자열의 length는 -1부터 시작된다.

대소문자 변경

let test11 = 'hello world';
test11.toUpperCase();  // 'HELLO WORLD'

• 대상 문자열을 모두 대문자로 변환한다.

let test12 = 'HELLO WORLD';
test12.toLowerCase();  // 'hello world'

• 대상 문자열을 모두 소문자로 변환한다.

문자열 양 끝의 공백 제거

let test13 = ' Hello World  ';  // ' Hello World  '
test13.trim();                  // 'Hello World'

템플릿 리터럴(Template Literal)

• ES6에서 새로 도입된 문자열 표기법이며 따옴표 대신 백틱(backtick) ``기호를 사용한다.
• ${ } 기호를 이용하여 변수나 연산 등 표현식 삽입이 가능하다.
• 기존의 따옴표와 + 연산자를 사용하지 않아도 간단한 방법으로 새로운 문자열을 삽입할 수 있다.

let name = '사과';
let num = 5;
let price = 1000;

// 기존의 방식
console.log(name + ' ' + num + '개의 가격은 ' + (num * price) + '원입니다.');
// 사과 5개의 가격은 5000원입니다.

console.log(`${name} ${num}개의 가격은 ${num * price}원입니다.`);
// 사과 5개의 가격은 5000원입니다.