JavaScriptで文字列の掛け算を実装したい場合の注意点

概要

Rubyでは文字列を数字で掛けると欲しい文字数のオブジェクトを簡単に作ることが出来ます。しかし、JavaScriptだとカジュアルに同じことが出来ないので、色々調べてみた結果をここにまとめてみます。

Rubyの例

'*' * 3
=> '***'

JavaScriptの例

 '*'.repeat(3)
 => '***'

注意点

IEだとrepeatという関数が無いらしいです。IEに対応する場合はpolyfillなど古い記法にトランスコンパイルしてくれるライブラリが必要です！ちなみにaxiosでasync awaitを記載する際にも必要なのでaxiosを使うところでついでにインポートしてあげると良さそうです！

polyfill使う際の書き方

Railsアプリでwebpackerを使っている場合は、標準で babel-polyfill (ES2015以降のJSの記法を自動で古いブラウザの記法にコンパイルしてくれるライブラリ)がwebpackerのgemと一緒にyarn側にインストールされるっぽいです。(yarn.lockに記載があった)
なお、実際のJSファイル内で使う場合はエントリーポイントとなるJSに以下の記載をする必要があります。基本的に javascript_pack_tag で読み込む対象のJSファイルにimportすれば良さそうです。

hoge.js

import "babel-polyfill"
// 中略

qiita.com

JSで文字列の掛け算が必要な場合

パスワードの入力確認画面でパスワードの入力情報をマスクした*(アスタリスク)をパスワードの桁数だけ表示したいというような場面で使う実装だと思います。(フロント側で桁数を整形しないとサーバーサイドに渡ったときにパスワードがハッシュ化されて桁数がわからなくなるのでJS側でゴニョゴニョやる)

例(axiosでPOSTし、プロミスの途中で値を加工する想定)

const res = await registerApi.post({任意のパラメータ}).then((res)=> {
  this.passwordMock = "*".repeat(this.user.password.length);
  // 中略
});

これでVue.jsのコンポーネントで加工した値を表示します。

<div class="password_confirm">
  <p>パスワード</p>
  <p>{{ passwordMock }}</p>
</div>

カクカクしかじか

技術的なアレコレ