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

メモ サロゲートペア・emoji (絵文字) リテラル コンストラクタ・型変換 プロパティ メソッド一覧 HTML関連メソッド 例 (プロパティ)

メモ

概要

連結

  • + 演算子
  • += 演算子

比較

変換

外部リンク


サロゲートペア
emoji (絵文字)

サロゲートペア

emoji (絵文字)

比較表

文字列
(例)
コード length
【文字数】
charCodeAt()
【指定位置のUnicode値】

codePointAt()
【指定位置のコードポイント値】

[@@iterator]
【イテレータ作成】
for-of

Intl.Segmenter
【国際化:テキスト区切り】
叱る 叱:U+53F1 (第1水準)
る:U+308B
2 0x53f1
0x308b
0x53f1
0x308b
2文字 2文字
𠮟る 𠮟:U+20B9F (第3水準)
る:U+308B
3 (不備) (不備)
0xd842
0xdf9f
0x308b
0x20b9f
0x308b
2文字 2文字
👍🏴‍☠️ ・thumbs up (2)
U+1F44D
・pirate flag (5)
U+1F3F4
U+200D
U+2620
U+FE0F
7 (不備) (不備)
0xd83d
0xdc4d
0xd83c
0xdff4
0x200d
0x2620
0xfe0f
(不備:区切り不明)
0x1f44d
0x1f3f4
0x200d
0x2620
0xfe0f
5文字 (不備) 2文字

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 '🏴‍☠️'

リテラル
・文字列リテラル
・テンプレートリテラル
・タグ付きテンプレート

リテラル

リテラル説明記述
使用不可文字改行変数・式の挿入
'【文字列】' 文字列リテラル
エスケープしていない
U+000A・U+000D・U+005C は不許可
U+2028・U+2029 を許可
(詳細は、JSON オブジェクト 参照)
'
(\' を使用)
\n +【加算・文字列結合 演算子】
"【文字列】" "
(\" を使用)
`【文字列】` テンプレートリテラル `
(\` を使用)

\n~n (8進数)
\n・改行 ${【変数・式】}
+【加算・文字列結合 演算子】
タグ関数`【文字列】` タグ付きテンプレートリテラル
不正なエスケープシーケンスは、SyntaxError例外 ではなく undefined  (LaTeX の\unicode コマンド等に対応)
タグ関数の詳細
引数名 (例)説明
strings 文字列リテラルの配列
  • 文字列リテラル と
    ${【変数・式】}
    交互に出現とみなす
  • 先頭と末尾は文字列リテラル
  • 存在しない部分は、空文字列
...values${【変数・式】} の展開結果
戻り値型説明
任意の型
${【変数・式】}
  • ※「行の最終文字が単独の \ の場合、次の行は結合」が文字列リテラル内で有効 (下記 例 参照)
  • ※次のC言語系の仕様は適用されない為、複数行にまたがる場合は +【加算・文字列結合 演算子】を使用
    「連続した 文字列リテラル は結合」
エスケープシーケンスコード名称・備考シンボル
\b0x0008バックスペースBACKSPACE<BS>
\t0x0009水平タブCHARACTER TABULATION
horizontal tab
<HT>
\n0x000A改行
ラインフィード
LINE FEED
newline
<LF>
\v0x000B垂直タブLINE TABULATION<VT>
\f0x000C改ページ
フォームフィード
FORM FEED<FF>
\r0x000D復帰
キャリッジリターン
CARRIAGE RETURN<CR>
\"0x0022クォーテーションマーク
ダブルクォート
QUOTATION MARK
double quote
"
\'0x0027アポストロフィー
シングルクォート
APOSTROPHE
single quote
'
\\0x005Cバックスラッシュ
円記号
REVERSE SOLIDUS
backslash
\
\n~n8進数\n~n ≦ 0xFF (strictモードでは使用不可)
\xHH0xHH
\uHHHH0xHHHH
\u{H~H} 0xH~H 有効範囲:0xH~H ≦ 0x10FFFF

※ H:16進数

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

// 行末が \ (次の行を結合)
const str4 = "文字列1\
文字列2";
console.log(str4);
// 出力:文字列1文字列2
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

コンストラクタ・型変換

メソッド説明
new String ( [ value ] ) コンストラクタ
String ( [ value ] )型変換

プロパティ

プロパティ説明備考
[数値インデックス]文字アクセス 下記 参照
参考:charAt【指定位置の文字】
String.prototype.constructorコンストラクタ定義下記 参照
length文字数下記 参照
String.prototypeプロトタイプ下記 参照

メソッド一覧

メソッド説明
String.prototype. [@@iterator] () コードポイント値のイテレータオブジェクト作成
String.prototype.at ( index ) インデックス位置要素 取得
String.prototype.charAt ( pos ) 指定位置の文字
String.prototype.charCodeAt ( pos ) 指定位置のUnicode値
String.prototype. codePointAt ( pos ) 指定位置のコードポイント値
String.prototype.concat ( ...args ) 文字列連結
String.prototype. endsWith ( searchString [ , endPosition] ) 終了文字列判定
String. fromCharCode ( ...codeUnits ) Unicode値から文字列生成
String. fromCodePoint ( ...codePoints ) コードポイント値から文字列生成
String.prototype. includes ( searchString [ , position ] ) 部分文字列判定
String.prototype.indexOf ( searchString, position ) 順方向 文字列検索
String.prototype.isWellFormed ( ) サロゲートペア適正チェック
String.prototype.lastIndexOf ( searchString, position ) 逆方向 文字列検索
String.prototype.localeCompare ( that )
localeCompare ( that [, reserved1 [ , reserved2 ] ] )
文字列比較 (ロケール)
String.prototype.match ( regexp )正規表現検索 (詳細)
String.prototype.matchAll ( regexp ) 正規表現検索 (詳細イテレータ)
String.prototype.normalize ( [ form ] ) 正規化
String.prototype. padEnd ( maxLength [ , fillString ] ) 末尾パディング
String.prototype. padStart ( maxLength [ , fillString ] ) 先頭パディング
String.raw ( template , ...substitutions ) 生の文字列取得
String.prototype.repeat ( count ) 文字列の繰り返し
String.prototype.replace ( searchValue, replaceValue ) 置換 (正規表現可)
String.prototype. replaceAll ( searchValue, replaceValue ) 全置換 (正規表現可・関数指定可)
String.prototype.search ( regexp ) 正規表現検索 (簡易)
String.prototype. slice ( start [, end] ) 部分文字列
(末尾からの指定可・先頭位置と終了位置の逆転なし)
String.prototype.split ( [separator [, limit]] ) 分割 (正規表現可)
String.prototype. startsWith ( searchString [, position ] )開始文字列判定
String.prototype.substr ( start [, length] ) 部分文字列 (文字長指定)
String.prototype.substring ( start [, end] ) 部分文字列
(先頭からの指定のみ・先頭位置と終了位置の逆転あり)
String.prototype. toLocaleLowerCase ()
toLocaleLowerCase ( [ reserved1 [ , reserved2 ] ] )
小文字変換 (現在ロケール)
String.prototype. toLocaleUpperCase ()
toLocaleUpperCase ( [ reserved1 [ , reserved2 ] ] )
大文字変換 (現在ロケール)
String.prototype.toLowerCase ()小文字変換
String.prototype.toString () 文字列変換
String.prototype.toUpperCase ()大文字変換
String.prototype.toWellFormed () サロゲートペア適正変換
String.prototype.trim ()両端の空白削除
String.prototype.trimEnd ( ) 末尾の空白削除
String.prototype. trimLeft () 左端の空白削除
String.prototype. trimRight () 右端の空白削除
String.prototype.trimStart ( ) 先頭の空白削除
String.prototype.valueOf ()String型変換

HTML関連メソッド

メソッド説明
String.prototype.anchor ( name ) ハイパーリンク (<a name>)
String.prototype.big () 大きな文字 (<big>) HTML5 廃止
String.prototype.blink () ブリンク (<blink>) 廃止
String.prototype.bold () 太字 (<b>)
String.prototype.fixed () 等幅フォント (<tt>) HTML5 廃止
String.prototype.fontcolor ( color ) フォント色 (<font color>) HTML5 廃止
String.prototype.fontsize ( size ) フォントサイズ (<font size>) HTML5 廃止
String.prototype.italics () イタリック体 (<i>)
String.prototype.link ( url ) ハイパーリンク (<a href>)
String.prototype.small () 小さな文字 (<small>)
String.prototype.strike () 取り消し線 (<strike>) HTML5 廃止
String.prototype.sub () 下付き文字 (<sub>)
String.prototype.sup () 上付き文字 (<sup>)

例 (プロパティ)

console.log(String.prototype);
// 出力:String {'', anchor: ƒ, at: ƒ, big: ƒ, blink: ƒ, …}

const str = 'あいうえお';
console.log(str[2]);
// 出力:う
console.log(str.constructor);
// 出力:ƒ String() { [native code] }
console.log(str.length);
// 出力:5