UXPに備えてモダンなJSの書き方に慣れる(string型の値、ECMA2015以降追加された機能)
string型のプリミティブ値、地味に扱いが面倒なことがあります。ゼロパッディング、余白の削除、等。string型も最新の環境では色々便利になっています。
テンプレートリテラル
ECMA2015以前、あるstring値を代入時に例えばstring値と関数の結果、変数をつなげる場合、ダブルクォート”もしくはシングルクォート’を使用して変数、式の範囲とstringの範囲を細く分ける必要がありました。
ダブルクォートかシングルクォートをstring値として使用する場合はどちらかで文字列を囲ってその文字列の中にどちらかを使用するという面倒なものでした。またクオートを何度も囲い直すのも書きづらいものです。ECMA2015で追加されたテンプレートリテラルを使用すると式、変数を挿入する場合もわかりやすい書き方が可能です。
テンプレートリテラルではシングルクォート、ダブルクォートの代わりにグレイブ・アクセントで囲います。シングルクオートと見た目が似ていますが異なるので注意してください。式、変数を挿入する場合は挿入部分に${}で囲むことでその中の部分のみ変数による値の挿入や関数式が有効な範囲ができます。以前のように++で何度も繋げたりクオートを何度も囲い直す必要がなくなりました。特にシングルクォートやダブルクォートを文字列に挿入する場合以前は読みづらいコードになりがちでしたがテンプレートリテラルの追加によりシンプルに挿入できるようになりました。ちなみに${}を文字列として使用した場合は\を$の前に挿入します。
それ以外にもテンプレートリテラルの場合は改行をそのまま使用できます。それ以前は文字列が改行を必要とする程長い場合は改行まえにクオートで閉じて改行後に+で繋げて長い文字列を扱う等面倒なものでした。
テンプレートリテラルは改行そのものもそのまま含んでくれて尚且つ書きやすくて便利です。ちなみに改行を含みたくない場合は改行の部分を${“”}で囲みます。
構造的なテキストも見やすく書けます。
その他高度な使用方法としてタグ付きテンプレートも使えます。これは定義した関数によってテンプレートリテラルの文字列を解析して新しい値を返すものです。関数自体はほとんど通常の関数と変わりませんが引数のみ受け取り方が決まっています。関数の引数は第一が${}で囲まれていない文字列を配列形式で${}の前後で分けて渡します。${}の数が多くなるほど文字列は細かい配列に分けられます。その後の引数は${}内の値を受け取ります。
ちなみに関数同様返す値はどんな型でも行けます。
padStartメソッド
padStartは文字の先頭に文字を追加するメソッドです。基本的な使い方ではゼロパッディングを扱う時です。id番号や時間の表示等で午後1時を示す時に1:00ではなく01:00のように時間の値が一桁の場合に頭にゼロを追加する時です。以前の環境ですと自前の関数を用意する必要がありましたがpasStartメソッドが追加されて以降その必要もなくなりました。ただし気をつけたいのがこれはstring型のメソッドということです。
基本ゼロパッドに使用するメソッドですがnumber型は必ず事前にstring型に変換する必要があります。padStartの第一引数には桁の数を、第二引数は桁が足りない場合に埋める文字を渡します。例えば三桁のid番号を扱う時に一桁の番号の場合も頭にゼロを二つ追加、二桁の番号の場合は頭にゼロを一つだけ追加する場合は第一引数に3を渡して第二引数に”0″を渡せば自動的にゼロで三桁になるように埋めてくれます。勿論その他の文字列でも埋めることが可能です。
padEndメソッド
padStartに対してpadEndは文字列の後ろに文字を追加します。基本の使い方はpadStartと同じです。
padEndもpadStartも第二引数を渡さなかった場合のデフォルトは空白になります。
includesメソッド
includesメソッドはArray型のメソッドとほとんど同じです。stringの場合は文字列の中に特定の文字列が入っているかboolean値を返します。引数に渡した文字列がある場合はtrue、なければfalseです。古い環境ではindexOfメソッドで文字列が含まれているかどうか確認していましたがboolean値を返すということでよりシンプルになりました。
trimメソッド
trimメソッドは文字列の両端の空白を削除します。htmlデータ等から文字列を引っ張ってきた時に余計なスペースを削除したい時などに使えるでしょう。
その他頭か後ろのどちらか片方だけ余白を削りたい場合はtrimStart、trimEndメソッドもあります。