문자열

문자열 리터럴

const singleQuote = '';
const doubleQuote = "";
const multiLine = "1\
2\
3\
4\
";


// ES2015+
const backQuote = `
1
2
3
4
5`;

문자열 리터럴은 이러한 방식으로 사용가능하며 백틱을 사용하면 손쉽게 여러행을 거쳐서 사용할 수 있다.

 

const empty = null;
console.log(empty + 'hello')    nullhello

const empty2 = '';
console.log(empty2 + 'hello')    hello

빈문자열을 만들때는 ' ' 로 충분하다.

 

 

문자열에 접근

const str = 'ABC';
str.charAt(2);	'C'
str[2];	'C'
const str2 = 'ABC       '
str2.trim()	'ABC'

charAt() : string 문자열 중 해당하는 순서(0을 기준으로 시작)의 문자 하나만 가져와서 char타입으로 변환해준다.

trim(): 문자열의 공백을 없애준다.

 

const paragraph =
	'The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?';
const searchTerm = 'dog';	

paragraph.indexOf(searchTerm);	40
paragraph[40];	'd'
paragraph[41];	'o'
paragraph[42];	'g'

indexof() : 해당 문자열의 위치를 알려준다.

 

문자열로 변환

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

원하는 값을 String()을 사용하여 문자열로 바꾸어 줄 수 있다.

 

JSON.stringify([1, 2, 3]);
JSON.stringify({ name: 'jang' });

객체를 JSON 문자열로 바꾸어 줄 수 있다.

 

['1', 123].toString();  '1,123'

String(true);  		 'true'
Boolean('false');	  true
Boolean(String('false')); true

.toString() 을 통해서도 객체를 문자열로 바꿔줄 수 있다.

 

문자열 병합

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

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

genHello('Kim');	'안녕하세요 Kim님 반갑습니다'

표현식안에도 문자열끼리 더하기를 사용 할 수 있다.

 

문자열과 배열

'HELLO WORLD'.split('');	['H', 'E', 'L', 'L', 'O', 'W', 'O', 'R', 'L', 'D']
'HELLO,WORLD'.split(',');	['HELLO', 'WORLD']

문자열을 하나하나 분해하려면 .split(' ') 을 사용하며

콤마(,) 를 기준으로 문자열을 분해하려면 .split('.')을 사용한다

 

const helloWorld = 'HELLO WORLD';
[...helloWorld];	['H', 'E', 'L', 'L', 'O', 'W', 'O', 'R', 'L', 'D']

join();
split();
[...]

위와 같은 방식들로도 문자열을 분해할 수 있다.

 

'HELLO WORLD'.length;   // primitive
['1', 2, 3].length;     // Reference, Object

원시 타입과 객체 타입 모두 length 속성을 사용할 수 있다.

 

Template Literals 

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴있다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있다.

 

1. 멀티라인 (개행)이 자유로움 

2. Basic String Formatting => 보간법 활용 => 표현식을 문자열로 포함

3. HTML Escaping: 안전하게 사용하도록 도움 (XSS, SQL Injection)

 

const htmlTemplate =
	'<div>' + '안녕하세요' + '</div>';

body.innerHTML = htmlTemplate;

이러한 해킹에 취약한 환경을 아래와 같이 보안해준다.

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

genHello('Jang');

작은 따옴표 대신에 `백틱`을 사용하여 줄바꿈을 자유로이 할 수 있게 되었다.

문자열 중간에 대입하는 변수를 + 대신에 ${변수값} 으로 간단히 사용할 수 있다.

 

 

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

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

위와 같이 HTML 태그를 바디에 삽입할 수 있다.