時計で一桁の場合、前に0を付けたいです。

質問

よくあるJavascriptのリアルタイム時計で、
桁が一桁だと13:7 というように格好悪くなってしまいます。そこで13:07と表示するように改造しようとしたのですがsprintfがないようで困っています。

以下駄目だった２つの書き方です。。

mi = 1;

// ■mi.length は取れずundifineとなる。。
if(mi.length < 2)
mi = "0" + mi;

// ■ブラウザリロード時に001のように0がどんどん増える。
if(mi < 10)
"0" + mi;

回答No.2

lunar16th · ベストアンサー

こんなのでどうでしょう。

<script language="JavaScript">

var mi = 5;
var test
//ここが問題の処理！！　※下記解説参照
test = ("00" + mi ).substr( ("00" + mi ).length -2 , 2 )

document.write(test)

</script>

私がよくやるゼロ埋め方法なのですが、
「00」+「ｎ桁の文字」　で、
「001」や「0012」等になった文字列から右端二桁だけを取得しています。

お礼

助かりました。一度増やしてカットするという斬新な発想力に驚きました。しかも凄くシンプルに書けますのですlunar16thさんの方法で今後作成していこうと思います。
ありがとうございました。

回答No.3

koutarou504

読みやすくする為、結論を先に記述します。
結論は、下記 *2 を *2b とする事です。
［旧：if(mi.length < 2)　］
［改：if((mi+"").length < 2)　］

今後の為に、理由を以下に。
ポイントは、データ型の自動変換にあります。
つまり、数字と数値は意識しなければならないと。

mi = 1; <--(*1)
mi には数値が設定されました。
よって、型は number となっています。

if(mi.length < 2) <--(*2)
lenght は文字列の長さを求めるプロパティですから
number オブジェクトには存在しません。
故に undefined となります。
(undefined は if で常に false です。)
ここで数値を数字とみて長さを求めたければ
if((mi+"").length < 2) <--(*2b)
もし mi が数字（文字列）の場合でも影響はありません。
文字列長 0 の文字列 "" を連結するというのは、
自動変換を使った数値を数字（文字列）にする
簡易的な手法です。

mi = "0" + mi; <--(*3)
この時点で、右辺の mi は数値ですが、
"0" という数字（文字列）と連結するので文字列として扱われ
左辺 mi は数字（文字列）となります。
故にここでの + は連結演算子(Num1+Val2:文字列の結合。)として働いています。

という事で、案１ の場合は *2 を *2b とするだけでも
とりあえずの対応は可能かと。

if(mi < 10) <--(*4)
比較演算子 < の右辺が数値（数値定数）の為、
左辺の変数の数字が比較の時点では数値として扱われます。
1 , "01", "001" いずれも 1 として扱われます。
というか、数値として考えると
1 , "01", "001" いずれも同じというか
見分けられないという事です。

"0" + mi; <--(*5)
上記 *3 のつもりと思われますが。
*5 の記述では、何も起こらないかと。

ここで、 *3 の様な記述でなんとかしたい場合は、
mi = "0" + (mi-0); <--(*3b)or(*5b)
mi-0 とする事で強制的に
1 , "01", "001" いずれも 1 として扱い
その前方に "0"(数字・文字列の０)を
連結演算子 + で連結すると。
これならば、"0" がどんどん増える事はありません。
数値 0 で減算するというのは、自動変換を使った
数字を数値にする簡易的な手法です。

で、考え方の補足として、データ保持変数と
表示用の編集変数を分けた方が無難かと。
少なくとも、案２ の障害は回避できます。
本当は、保持，作業，表示と分けるのが理想ですが。

お礼

Javascriptにも型の自動変換があったのですね。知りませんでした。
３つの変数に分ける考え方勉強になります。
私はいままで区別なく使用しておりました【汗】
変数の名前も用途に合わせるとわかりやすそうですね。
ありがとうございました。

回答No.1

jurarumin

関数を作ってみました。
frmstr　：　対象数値　　
strlen　：　埋める桁数

frmstr　=　1
strlen　=　2　→　01

frmstr　=　1
strlen　=　3　→　001
となります

function ZeroPad(frmstr,strlen) {
//指定文字数に見合わない部分に0を埋めて戻します。

　　var　wrk = jsTrim(frmstr);
　　var　lng = wrk.length;
　　var　rtn = "";

　　//入力文字が空の場合は0埋めしない
　　if(frmstr == "" ){
　　　　return "";
　　}

　　//桁が超えていた場合は、取得文字列をそのまま戻す。
　　if (wrk.length >= strlen){
　　　return wrk;
　　}

　　//指定文字数が1未満も取得文字列をそのまま戻す。
　　if (strlen < 1){
　　　return wrk;
　　}

　　for (var i = 0; i < strlen-lng; i++) {
　　　rtn = rtn + "0";
　　}
　　return rtn + wrk;
}

お礼

なぜか私の環境ではjsTrimという関数がないのか動作しませんでしたが参考になりました。ありがとうございます。