[Javascript] 基本機能コントロール 数値のゼロパディングをベースfunctionにする方法

2019年12月7日

Javascript テクノロジー プログラミング

毎日の運動量をAppleWatchに支配されて、仕事どころでは無く成りつつある、下駄です。 毎月のノルマを達成して、月次目標のクリアを1年間やってみて、当初では1日30分程度の運動で成り立っていた目標値が、先月はなんと1日あたり平均150分、消費カロリーが1日平均1300キロカロリーを目標とされてしまい、毎日地獄のような運動生活を強いられてしまいましたwww おかげでリーマン時代についた腹回りの脂肪はほぼ無くなり、数年前に買ったが、腰回りが狭くなり履けなくなっていたズボンなどがすっぽり入るようになって喜んでいた反面、運動地獄で毎日少しストレスを感じ始めていたのですが、きっとこれを辞めたとたんまた体脂肪が舞い戻ってくるんだろうな・・・と考えながら、1日でも長く続けられるように頑張っているこの頃です・・・ 仕事や、このブログでこれまでたくさん作ってきたスニペットも、javascriptのnative-prototypeに登録して、もっと便利に使えるようにしたいと考え、ここ最近では、jQueryでも手が届いていない、現場で本当に使えるスニペットをnative関数にしてしまうようなライブラリを構築し始めました。 手始めに今回は数値解析系のWebサービスを作る時などで重宝するゼロパディングを文字列関数Stringのprototypeに突っ込んでみました。 今後の展開も含めて、総合的なライブラリが完成したらセットしやすい形にしてGithubにアップしたいと思います。 とりあえず、内容を小出しに説明していきたいと思います。

ソースコード

if(typeof String.prototype.fill === "undefined"){ // zero-padding , space-padding String.prototype.fill = function(flg){ var str = String(this); if(!flg){return str;} var res = flg.match(/%*([-0]{0,2})(\d+?)(\.*)(\d*?)([df])/i); if(!res || res.length < 6){return str;} var mode = res[1]; var num1 = res[2]; var prod = res[3]; var num2 = res[4]; var type = res[5]; switch(type){ case "d": // 整数 str = String(Math.floor(Number(str))); var add = Number(num1) - str.length; if(add > 0){ switch(mode){ case "0": str = Array(add + 1).join("0") + str; break; case "-0": str = str + Array(add + 1).join("0"); break; case "": str = Array(add + 1).join(" ") + str; break; case "-": str = str + Array(add + 1).join(" "); break; }} return str; case "f": // double num1 = (num1) ? num1 : 1; var sp = str.split("."); var str_int = sp[0]; var str_flt = sp[1]; var add_int = Number(Number(num1)) - str_int.length; var add_flt = Number(Number(num2)) - str_flt.length; var padding = ""; switch(mode){ case "0": padding = "0"; break; case "": default: padding = " "; break; } str_int = (add_int > 0) ? Array(add_int + 1).join(padding) + str_int : str_int; str_flt = (add_flt > 0) ? str_flt + Array(add_flt + 1).join(padding) : str_flt; return str_int + prod + str_flt; } return str; }; }

使い方

上記コードをページ読み込み時に事前に実行しておく(jQueryと同じくhtmlのheadタグに記載しておくのが良い) 数値の書かれている文字列に対してfillコマンドが使えるようになります。 送り値の変数は、PHPのsprintfと似た形式にしているので、分かりにくい人は下記の実行サンプルを参考にしてください。

設定フラグ

"%-05.5f" 最初の%はあってもなくても構いません。PHPのsprintfを意識しただけなので、書かなくても動作します。 次に、"0","-0","-","*blank"が、前方ゼロパディング、後方ゼロパディング、前方スペースパディング、後方スペースパディングのフラグになっています。 さらに最後の英字はdとfが使えて、dが整数、fが少数です。 その間にある数字は、整数の場合は、トータルの桁数、少数の場合は、整数値の桁数"."少数値の桁数を記述できます。 WEBサービス構築の際に、桁数を合わせて表示しなければ行けない時などに、便利に使えると思いますね。

実行サンプル

# 整数の前方ゼロパディング "123".fill("%05d"); > "00123" # 整数の後方ゼロパディング "123".fill("%-05d"); > "12300" # 整数の前方スペースパディング "123".fill("%5d"); > " 123" # 整数の後方スペースパディング "123".fill("%-5d"); > "123 " # 少数のゼロパディング "123.456".fill("%05.5f"); > "00123.45600" # 少数のスペースパディング "123.456".fill("%5.5f"); > " 123.456 "

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。