JavaScript基礎 #6 文字列とテンプレートリテラル

const a = 'シングルクォート';
const b = "ダブルクォート";
const c = `バッククォート(テンプレートリテラル)`;

const s = 'ジャバスクリプト';

s.length;      // 8
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(',');  // 'りんご,バナナ'

// 1文字ずつ
'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 (過剰)