JavaScript: 文字列を作成する (1)
文字列を作成する方法
- 文字列を + 演算子で連結したりテンプレートリテラルで合成したりする。
初歩的な話や用途が限定されている話で使用します。 はじめの一歩ではこちらだけ眺めれば十分です。 - 雛形になる文字列 (テンプレート) を用意して置換する。
置換処理を多用します。テンプレートのカスタマイズが容易になります。 ただし、正規表現やコールバック処理など難しい話が出てきます。 - さらに濃い話になるとテンプレート文字列をプログラムとは別の外部リソースファイルに分離して
日本語版、英語版など多言語に対応できるようにする
国際化対応 (i18n) の話も出てきます。
国際化対応, i18n
テンプレートリテラルで文字列を作る
- TestJS_string_format01.html (サンプル1)
テンプレートリテラルで文字列を作るサンプル。
// テンプレートリテラルで日付の文字列を作る。 const result = `今日は ${year} 年 ${month} 月 ${day} 日です。`;
- JavaScript: テストプログラムの実行とソース表示
テストプログラムの実行結果の文字列を整形する。
テンプレート文字列を String.replcae() で置換する
%s を含むテンプレートを逐次置換する例
%s を含むテンプレート文字列を用意して これを変数の文字列に置換します。
- TestJS_string_format01.html (サンプル2)
先に単純なサンプルです。 置換したい文字列の数だけ 1個ずつ単純に replace() する例です。 こちらは毎回多くのコードを書き、汎用性もないのが欠点です。
const template = "今日は %s年 %s月 %s日だよ。"; const result = template.replace("%s", 2023).replace("%s", 11).replace("%s", 3);
- TestJS_string_format01.html (サンプル3)
上の %s の置換処理を汎用の関数にしたサンプル。function format1(template, ...args){ let counter = 0; return template.replace(/%s/g, () => args[counter++]); }
上のサンプルは 正規表現 や コールバック
を含むプログラムで、
はじめの一歩だと分かりにくい処理になります。
詳しい説明は下を見てください。
- TestJS_RegExp_replace_template03.html
replace(正規表現, コールバック関数) の処理 (1)
JavaScript: 文字列の処理: 正規表現 (1)
単項演算子 i++ と ++i の違い
%1, %2, ... を含むテンプレートを逐次置換する例
- TestJS_string_format01.html (サンプル4)
%s の代わりに %1, %2, ... を使用し、 テンプレートの内容に応じて引数の文字列の出力順を変えられるようにした例。
replace(正規表現, コールバック関数) の処理 (2)
function format2(template, ...args){ return template.replace(/%(\d+)/g, (match, capture1, position, source) => args[ parseInt(capture1) - 1 ] ); }
国際化対応 (i18n)
Web アプリケーションによっては日本語用、英語用、 中国語用などさまざまな言語に対応させたい話も出てきます (国際化対応, i18n)。 このようなプログラムでははじめから国際化対応を意識した作り方をします。
例えば下のようなプログラムは国際化対応ではありません。
// 国際化対応ではないプログラムの例
// プログラムの中に日本語のメッセージをそのまま書いてある。
// 英語など他の言語には使えない。
let message = `私の名前は ${name} です。`;
国際化対応を考慮したプログラムでは
プログラムの中にダイアログなどのメッセージ文字列を直接入れず、
外部のリソースに分離します。
言語別 (日本語用、英語用など) のリソースファイルを用意して、
使用したい言語に切り替えてアプリケーションに表示するといった処理を行います。
このような話は Java や C# など他のプログラミング言語でも出てきます。
テンプレートリテラルは外部リソースに分離できません
テンプレートリテラルだとメッセージなどの文字列を外部リソースに分離できません。 プログラムの中に直接メッセージ文字列を入れる ハードコーディングな書き方しかできません。
テンプレート文字列を置換する方法の場合は、 テンプレート文字列を外部のリソースファイルに分離することができます。 テンプレート文字列だけ編集し直してカスタマイズすることも容易になります。 プログラムコードを直接眺めたり修正したりする必要がなくなります。
HTML テキストを作成する例
HTML を作成する単純なサンプル。 HTML を雛形と本文に分けて用意し、置換処理で 1つの HTML に合成します。
HTML のテンプレートと本文を合成する処理を Web ツール風にしたサンプル。
HTML 要素を作成する
HTML テキストではなくて、table や ul などの HTML 要素 (HTMLElement) のオブジェクトを作成してドキュメントツリーを作る話もあります。 こちらは静的な HTML の作成ではなく Web アプリケーションで動的に HTML 要素を追加したり削除したりする話になります。