JS 문자열

문자열 리터럴

• 문자열은 아래의 예시처럼 다양하게 간단하게 만들 수 있음

const singleQuote = '';
const doubleQuote = "";
const multiline = '1\
2\
3\
5\'
;
// ES2015+ (위의 multiline을 백틱으로 간단하게 표현 가능)
const backQuote = `
1
2
3
4
5`;

// 빈 문자열(간단하게 따옴표로 가능, null을 할 필요 없음)
const empty = '';

문자열에 접근

• 앞서 간단하게 선언해서 만들고 내부의 내장 객체의 다양한 문자열을 다룰 수 있는 메소드를 쓸 수 있음
• 다양한 내장 객체를 쓸 수 있음

const str = 'ABC';

// 인덱스로 접근해서 문자 출력
str[2]
str.charAt(1)

// 문자 찾기
const searchTerm = 'A';
str.includes(searchTerm);

// indexOf로 문자가 있는지 확인 가능(해당 인덱스 반환)

• 참고자료

문자열로 반환

• 문자열 변환은 아래와 같이 하면 어떤 값이어도 대부분 문자열로 원시 타입으로 바꾸어줌
• toString의 경우 다양한 타입에서도 해당 메소드가 있음, 다양한 방법으로 문자열로 변환 가능함
• 하지만 문자열을 다시 바꾸는 건 쉽지 않음
• 문자열 변환은 String 매핑만으로도 충분함

String(123); // '123'
String(undefined); // 'undefined'
String(null); // 'null'
String({}); // '[object Object]'
String({ name: 'jang' }); // '[object Object]'
String([1, 2, 3]); // '1,2,3'

// 만약 객체 자체를 변환하고 싶다면 그대로 문자로 찍을 수 있음
JSON.stringify([1,2,3]);
JSON.stringify({ name: 'jang' });

// toString도 사용가능(문자열 변환 가능)
['1', 123].toString()

문자열 병합

• 문자열 더할 때 더하기 연산자를 사용함, 이를 활용해서 문자열을 더하는 병합을 나타낼 수 있음

function genHello(name) {
  return '안녕하세요 ' + name + '님 반갑습니다';
}

genHello('Kevin');

• 삼항 연산자를 활용해서 쓸 수도 있음(하지만 연산자 우선순위가 있기에 아래처럼 처리해줘야함)

function genHello(name) {
  return '안녕하세요 ' + (name ? name : '이름 없음') + '님 반갑습니다';
}

genHello('Kevin');

• 다양하게 활용 가능함

function genHello(name) {
  const resultName = name ? name : '이름없음';
  const anotherName = name || '이름없음';

  return '안녕하세요 ' + resultName + '님 반갑습니다';
}

genHello('Kevin');

문자열과 배열

• 문자열을 배열로 바꾸려고 할 때 split 함수를 사용할 수 있음
• 배열을 문자열로 바꾸기 위해서 join 함수를 사용할 수 있음

// 문자가 하나씩 배열로 들어감
'HELLO WORLD'.split('');

// 콤마 기준으로 배열화 ['HELLO', 'WORLD']
'HELLO,WORLD'.split(',');

// 문자열로 합치는 경우 join 메소드 사용
['HE', 'LLO', 'WO', 'RLD'].join('');
['HE', 'LLO', 'WO', 'RLD'].join(',');

• ... 전개 연산자로 문자열을 배열로 바로 풀어서 나타낼 수 있음

const helloWorld = 'HELLO WORLD';

[...helloWorld];

• 배열, 문자열 모두 length 속성을 가지고 있음(길이를 재는 것)

템플릿 리터럴

• 멀티라인(개행)이 자유로움, Basic String Formatting, 변수값 및 표현식을 보간법을 활용하여 문자열에 포함시킬 수 있음
• HTML Escaping 즉, 안전하게 사용하도록 도움을 함(XSS, SQL Injection 등을 피할 수 있음)
• DOM을 활용해서 직접 태그 및 코드를 심는것을 방지한다는 의미
• 백틱을 사용해서 템플릿 리터럴을 아래 예시처럼 쓸 수 있음(자동개행, $표시로 값 표기 등)
• 그러면 멀티라인을 안전하게 쓸 수 있음

function genDivision(innerText) {
  return  `<div>${innerText}</div>`;
}

const divTag = genDivision('Kevin');
body.innerHTML = divTag;