[실전 자바스크립트]5. 문자열타입

자바스크립트 문자열 만들기

const s1 = 'abc';
const s2 = "abcd";
const s3 = `abcde`;
//자바스크립트 문자열에는 length라는 속성값이 존재한다.
console.log(s1.length,s2.length,s3.length)

여러개의 문자열 조합하기

const name = 'mike';
const age = 23;
const text1 = 'name: ' + name + ', age: ' + age; // 따옴표를 사용하면 +로 문자열 연결 
const text2 = `name: ${name}, age: ${age}`; // 백틱을 사용하면, ${}를 통해 변수 활용 가능(추천함)
console.log(text1);
console.log(text2);

줄바꿈을 포함하는 문자열 만들기

const text1 = '할 일 목록\n* 운동하기\n* 요리하기'; //따옴표에서는 \n활용
console.log(text1);

//백틱에서는 그냥 쭉스기
const text2 = `할 일 목록 
* 운동하기
* 요리하기
`;
console.log(text2);

문자열에 있는 character(문자)추출하기

const s1 = 'abcd';
const c1 = s1[1]; // 대괄호를 활용한 index출력
console.log(c1);

// 자바스크립트 string => 불변(immutable) : 값을 수정하지 못한다.
const s = 'abcd';
s2[1] = 'z'; //해당 index에서의 값을 변경할 수 없다.
console.log(s2);

// replace함수를 활요하면 변경이 가능하다.
const input = 'This is my car. The car is mine';
const output = input.replace('car', 'bike'); // string의 immutable특성상, 기존의 문자열을 만들어 내는 것이 아닌, 새로운 문자열을 만든다.
console.log({ input, output }); // 여기서도 모든 값을 replace하는게 아니고, 하나만 값을 변경한다.
console.log(input.replace(/car/g, 'bike')); //정규표현식을 활용해서 변경이 가능하다.
// replaceAll: 최근에 추가되어진 함수 이걸로는 모두 바꿀 수 있다.
console.log(input.replaceAll('car', 'bike'));

문자열에 특정 문자열 검색하기

const s1 = 'This is my car. The car is mine';
console.log(s1.includes('car')); // true
console.log(s1.includes('my car')); // true
console.log(s1.includes('my car', 10)); // 10에서 부터 my car가 있는지 검사 : false

//시작 문자열 검사
console.log(s1.startsWith('This is')); // true
console.log(s1.startsWith('is')); // false

//끝나는 문자열 검사
console.log(s1.endsWith('mine')); // true
console.log(s1.endsWith('is')); // false

문자열에 일부분 추출하기

const s1 = 'This is my car. The car is mine';
console.log(s1.substr(0, 4)); // 시작위치, 길이 : This
console.log(s1.substr(5, 2));  // is
console.log(s1.substr(16));// 시작위치, 없으면 나머지 : The car is mine

let pos = s1.indexOf(' '); // 공백자를 구분자로 하여 출력해 줌 : This
console.log(s1.substr(0, pos));
pos = s1.lastIndexOf(' '); // 마지막 것을 반환 : mine
console.log(s1.substr(pos + 1));

console.log(s1.slice(5, 7)); // 첫인덱스, 두번째인덱스 5에서 7까지 잘라냄.

문자열을 분할하거나 합치기

const s1 = 'This is may car. The car is mine';
console.log(s1.split(' ')); // 공백 문자를 기준으로 분할된다. 배열의 형태로 반환이 되어짐.

const arr = s1.split('.'); // .을 기준으로 분할하기 때문에 문장으로 나눠진다
console.log(arr);
consoel.log(arr.map(item => item.trim())); // 주변의 공백 문자를 제거해주는 trim메서드.

console.log(s1.split(' ').join()); // 해석 : 공백문자 단위로 split하고, 다시 그 배열값들을 join한다
console.log(s1.split(' ').join('..')); // ..중간에 join할 때 값을 '..'으로 하겠다.

길이지정 및 패딩문자 채우기

console.log('12'.padstart(5, '0')); // 최소 다섯글자로 표현하고, 앞부분의 값을 0으로 채운다. : 00012
console.log('123'.padstart(5, '0')); // 00123
console.log('123'.padstart(5, '*')); // **123
console.log('123'.padEnd(5, '*')); // 123**

const s1 = 'This is my car. The car is mine';
console.log(s1.match(/T[^\S-]*/g)); // 정규표현식을 통해서, 대문자 T로 시작하는 단어들만 추출

tagged template literals 문법 조금만 알아보기

// tagged template literals
// ...expressions : rest parameter라고 함. 파이썬에 유사한 부분을 많이 봤을꺼임
function taggedFunc(strings, ...expressions) {
	console.log({ strgins, expressions });
  	return 123;
}
const v1 = 10;
const v2 = 20;
/*
함수 호출시에 괄호를 입력하지 않았고, ``(백틱)을 이용한 문자열 입력을 하고 있다.
지정한 함수에서는 문자열과 표현식이 구분이 되어져서 입력되어진다.
strings는 expressions보다 무조껀 1개가 더 많은 아이템 개수를 가진다.
*/
const result = taggedFunc`a-${v1}-b-${v2}`;
console.log({ result });

taggedFunc`a-${v1}-b-${v2}-c`;
taggedFunc`a-${v1}-b-${v2}-c`;
taggedFunc`${v1}-b-${v2}`;

taged template literals의 실제 활용

function highlight(strings, ...expressions) {
	return strings.reduce(
      (acc, str, i) =>
      	expressions.length === i
      		? `${acc}${str}`
      		: `${acc}${str}<strong>${expressions[i]}</strong>`,
      '',
     );
}

const v1 = 10;
const v2 = 20;
const result = highlight`a ${v1} b ${v2}`; //직접 명시한 highlight함수 tagged template literals방식으로 표현식 부분에 대해서 strong태그를 적용 가능하다.
console.log(result);

highlight(['a ', ' b ', ''], v1, v2);