Corredor

ウェブ、プログラミングの勉強メモ。

辞書に照らし合わせて指定文字列を変換する JavaScript

フォーム上の入力値 (ラジオボタンの選択項目など) を REST API に送る際、画面と API の名称や値に関する仕様の差異を吸収するため、hoge と入力されたら fugafoo と入力されたら bar といった文字列を送信する」といった実装を組み込む必要が出てしまった。

愚直に実装しようとすると、inputStr.replace(/hoge/u, 'fuga') みたいな実装になりそうだが、replace() を重ねがけしていくのは微妙な気がしたのと、変換したい文言の内容がちょくちょく変わりそうだったので、変換処理自体は固定のまま、変換する文言の情報を辞書的に登録しやすくする実装を考えた。

それがコチラ。

replace-text-from-array.js の方は、source (変換前の文言・検索対象) と replacement (変換後の文言) というプロパティを持つ連想配列を、配列で定義している。変換辞書が配列形式なので、Array#find() を利用して変換したい文言を調べている、というワケ。

replace-text-from-object.js の方も考え方は同じようなモノだが、変換辞書とする変数の形が違う。sourcereplacement のペアを Value に取る、全体が連想配列な構造。連想配列から find() したい場合は、Object.keys() でキー名 (プロパティ名) の配列を作ってループしてやれば良い。

一度作ってしまえばなんてことないのだが、ありがちな2パターンのデータ構造に合わせて同等の結果を得られるスニペットコードを作ってみた次第。

JavaScript コードレシピ集

JavaScript コードレシピ集