자바스크립트 기초 #6 문자열과 템플릿 리터럴

const a = '작은따옴표';
const b = "큰따옴표";
const c = `백틱(템플릿 리터럴)`;

const s = '자바스크립트';

s.length;      // 7
s[0];          // '자'
s.at(0);       // '자'
s.at(-1);      // '트' (음수 인덱스 — at만 가능)

const s = 'hello world';

s.includes('world');     // true
s.indexOf('world');       // 6
s.indexOf('foo');         // -1 (없으면 -1)
s.startsWith('hello');    // true
s.endsWith('world');      // true

const s = 'hello world';

s.slice(0, 5);       // 'hello'
s.slice(6);          // 'world'
s.slice(-5);         // 'world' (끝에서 5자)
s.substring(0, 5);   // 'hello' (slice과 거의 같음)

const s = '  Hello World  ';

s.trim();              // 'Hello World'
s.trimStart();         // 'Hello World  '
s.trimEnd();           // '  Hello World'
s.toLowerCase();       // '  hello world  '
s.toUpperCase();       // '  HELLO WORLD  '
s.replaceAll(' ', '_'); // '__Hello_World__'

const s = '사과,바나나,포도';

s.split(',');                 // ['사과', '바나나', '포도']
['사과', '바나나'].join(',');  // '사과,바나나'

// 한 글자씩
'hello'.split('');            // ['h', 'e', 'l', 'l', 'o']

// 빈 문자열로 합치기
['h', 'i'].join('');          // 'hi'

const s = 'a😀b';
s.split('');          // ['a', '\uD83D', '\uDE00', 'b']  ← 깨짐
[...s];               // ['a', '😀', 'b']
Array.from(s);        // ['a', '😀', 'b']

const name = '커티스';
const age = 30;

// + 연산
const a = '안녕, ' + name + ' (' + age + ')';

// 템플릿 리터럴
const b = `안녕, ${name} (${age})`;

const html = `
  <div>
    <h1>제목</h1>
    <p>본문</p>
  </div>
`;

function highlight(strings, ...values) {
  return strings.reduce((acc, s, i) => {
    return acc + s + (values[i] !== undefined ? `[${values[i]}]` : '');
  }, '');
}

const name = '커티스';
const age = 30;
highlight`이름은 ${name}, 나이는 ${age}입니다`;
// '이름은 [커티스], 나이는 [30]입니다'

String(42);              // '42'
(42).toString();         // '42'
`${42}`;                 // '42' — 가장 흔한 관용구

Number('42');             // 42
parseInt('42px');         // 42 — 앞부분만
parseFloat('3.14');       // 3.14
+'42';                    // 42 — 단항 + 연산자

Number('abc');            // NaN
parseInt('abc');          // NaN

const re = /hello/i;       // 대소문자 무시
'Hello World'.match(re);   // ['Hello', ...]
re.test('Hi');             // false
re.test('Hello');          // true

// 이메일 형식 대충 검사
/^[^@]+@[^@]+\.[^@]+$/.test('me@example.com');   // true

// 숫자만 추출
'price: 1500원'.match(/\d+/);   // ['1500', ...]

// 모든 매치
'a1 b2 c3'.matchAll(/[a-z]\d/g);  // 이터러블

// 치환
'2026-05-04'.replace(/-/g, '/');  // '2026/05/04'

const date = '2026-05-04';
const m = date.match(/^(\d{4})-(\d{2})-(\d{2})$/);
// m: ['2026-05-04', '2026', '05', '04', ...]

const [, year, month, day] = m;
console.log(year, month, day);   // 2026 05 04

const m = '2026-05-04'.match(
  /^(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})$/
);
m.groups.year;    // '2026'
m.groups.month;   // '05'
m.groups.day;     // '04'

// 단순 검색
s.includes('foo');               // O
s.match(/foo/);                  // X (과함)

// 시작/끝 검사
s.startsWith('http');            // O
s.match(/^http/);                // X

// 단순 치환
s.replaceAll('foo', 'bar');      // O
s.replace(/foo/g, 'bar');        // X (과함)