数値の0埋め

今回は備忘録的な内容です。
よくやる内容ではあるのですが「0埋め」処理です。
「0パディング」とも言いますね。

Javascriptで配列情報を操作する際には数値が理想なのかもしれません。
ただ、情報元のキーを考えると、あえて「0埋め」することがあったりします。
また、日時の表示にはよく使う内容です。
今回はそういう場合の覚書です。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

        <script type="text/javascript"><!--

            $(function(){

                $('#button').click( function() {
                    var setNum = $('#number').val();
                    var setPad = ($('#left_pad').val() * -1);
                    if ( $('#left_pad').val() > setNum.length) {
                        setNum = ( '000000000' + setNum ).slice( setPad );
                    }
                    $('#dispNum').html( setNum );
                });

            });


        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin : 10px;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">
            <div id="disp_area">
                <span id="dispNum">0</span>
            </div>
            <div id="input_area">
                <input id="number" type="text" value="0">
                <select id="left_pad">
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                </select>
                <button id="button">click</button>
            </div>
        </div>

    </body>
</html>

sample

sample を click すると数字が表示されています。
button がありますが culick すると数字が「0埋め」されて表示されます。

特に特別難しい訳ではありませんが、忘れやすいので改めて記載しておきます。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です