String【文字列】オブジェクト ^{2015 (6) / 2017 (8) ～ 2021 (12)}

function funcCharCodeAt(str) {
  for (let i = 0; i < str.length; i++) {
    const char = str.charCodeAt(i);
    console.log(String(i), '0x' + char.toString(16), String.fromCharCode(char));
  }
}

function funcCodePointAt(str) {
  for (let i = 0; i < str.length; i++) {
    const char = str.codePointAt(i);
    console.log(String(i), '- 0x' + char.toString(16), String.fromCodePoint(char));
    if (0xFFFF < char) {
      i++;
    }
  }
}

function funcFor(str) {
  for (const char of str) {
    console.log(char, '0x' + char.codePointAt(0).toString(16));
  }
}

function funcSegmenter(str) {
  const segGrapheme = new Intl.Segmenter('ja-JP');
  console.log([...segGrapheme.segment(str)].length);
  for (const segment of segGrapheme.segment(str)) {
    console.log(segment.index, segment.segment);
  }
}

// 通常
const str1 = '叱る';  // 叱：U+53F1 (第1水準) る：U+308B
console.log(str1);
// 出力：叱る
console.log(str1.length);
// 出力：2
funcCharCodeAt(str1);
// 出力：
// 0 0x53f1 叱
// 1 0x308b る
funcCodePointAt(str1);
// 出力：
// 0 - 0x53f1 叱
// 1 - 0x308b る
funcFor(str1);
// 出力：
// 叱 0x53f1
// る 0x308b
funcSegmenter(str1);
// 出力：
// 2
// 0 '叱'
// 1 'る'

// サロゲートペア
const str2 = '𠮟る';  // 𠮟：U+20B9F (第3水準) る：U+308B
console.log(str2);
// 出力：𠮟る
console.log(str2.length);
// 出力：3
funcCharCodeAt(str2);
// 出力：
// 0 0xd842 [不正文字]
// 1 0xdf9f [不正文字]
// 2 0x308b る
funcCodePointAt(str2);
// 出力：
// 0 - 0x20b9f 𠮟
// 2 - 0x308b る
funcFor(str2);
// 出力：
// 𠮟 0x20b9f
// る 0x308b
funcSegmenter(str2);
// 出力：
// 2
// 0 '𠮟'
// 2 'る'

// 絵文字
const str3 =
  // 👍 thumbs up (2)
  String.fromCodePoint(0x1F44D)
  // 🏴‍☠️ pirate flag (5)
  + String.fromCodePoint(0x1F3F4, 0x200D, 0x2620, 0xFE0F);
console.log(str3);
// 出力：👍🏴‍☠️
console.log(str3.length);
// 出力：7
funcCharCodeAt(str3);
// 出力：
// 0 0xd83d [不正文字]
// 1 0xdc4d [不正文字]
// 2 0xd83c [不正文字]
// 3 0xdff4 [不正文字]
// 4 0x200d [不正文字]
// 5 0x2620 ☠
// 6 0xfe0f [不正文字]
funcCodePointAt(str3);
// 出力：
// 0 - 0x1f44d 👍
// 2 - 0x1f3f4 🏴
// 4 - 0x200d [不正文字]
// 5 - 0x2620 ☠
// 6 - 0xfe0f [不正文字]
funcFor(str3);
// 出力：
// 👍 0x1f44d
// 🏴 0x1f3f4
// ‍[不正文字] 0x200d
// ☠ 0x2620
// [不正文字] 0xfe0f
funcSegmenter(str3);
// 出力：
// 2
// 0 '👍'
// 2 '🏴‍☠️'

const str = "(STRING)";
// 文字列リテラル (シングルクォート)
const str1 = str + '\'文字列１\'\n"文字列２"\n`文字列３`' + str;
// 文字列リテラル (ダブルクォート)
const str2 = str + "'文字列１'\n\"文字列２\"\n`文字列３`" + str;
// テンプレートリテラル (タグ付き)
const str3 = `${str}'文字列１'\n"文字列２"
\`文字列３\`` + str;
console.log(str1 === str2); // 出力：true
console.log(str2 === str3); // 出力：true
console.log(str3 === str1); // 出力：true
console.log(str1);
// 出力：
// (STRING)'文字列１'
// "文字列２"
// `文字列３`(STRING)

// 行末が \ (次の行を結合)
const str4 = "文字列１\
文字列２";
console.log(str4);
// 出力：文字列１文字列２

const numA = 2;
const numB = 3;
// タグ付きテンプレートリテラル (変数・式)
const strT = `${numA} * ${numB} = ${numA * numB}`;
console.log(strT);
// 出力：2 * 3 = 6

/**
* タグ関数
 * @param  {string[]}  strings 文字列リテラルの配列
 * @param  {...string} values  ${【変数・式】} の展開結果
 * @return {string}            展開した文字列
 */
function tag(strings, ...values) {
  console.log(`tag:strings.length = ${strings.length}`);
  for (let i = 0; i < strings.length; i++) {
    console.log(`tag:${i}:[${strings[i]}]`);
  }

  console.log(`tag:values.length = ${values.length}`);
  for (let i = 0; i < values.length; i++) {
    console.log(`tag:${i}:[${values[i]}]`);
  }

  let str = '';
  for (let i = 0; i < values.length; i++) {
    str += strings[i];
    str += values[i];
  }
  str += strings[strings.length - 1];
  return str;
}

const numA = 2;
const numB = 3;
// タグ関数呼び出し
console.log(tag`(${numA} * 10) + ${numB} = ${(numA * 10) + numB}`);
// 出力：tag:strings.length = 4
// 出力：tag:0:[(]
// 出力：tag:1:[ * 10) + ]
// 出力：tag:2:[ = ]
// 出力：tag:3:[]
// 出力：tag:values.length = 3
// 出力：tag:0:[2]
// 出力：tag:1:[3]
// 出力：tag:2:[23]
// 出力：(2 * 10) + 3 = 23