JavaScriptで配列内の各値の末尾n桁を抽出する方法をわかりやすく解説

次のように、数値リテラルを含む配列があるとします。

const arr = ["", 20191219, 20191220, 20191221, 20191222, 20191223, 20191224, 20191225];

ここで求められているのは、この配列と数値 n を引数として受け取るJavaScript関数を作成することです。各要素が n 文字以上の場合は、その末尾の n 文字だけを新しい要素として返し、n 文字未満の場合は元の要素をそのまま返します。

実装のポイント

この処理を実現するためには、以下の手順が有効です。

• Array.prototype.map() を使って配列の各要素を順番に処理する
• String() で数値を文字列に変換し、長さを判定する
• substr()（または slice()）を使って末尾の n 文字を切り出す
• 切り出した結果を数値に戻せる場合は +part で数値化し、先頭の「0」が失われるケースでは文字列のまま返す

それでは、実際のコードを見ていきましょう。

コード例

const arr = ["", 20191219, 20191220, 20191221, 20191222, 20191223,
20191224, 20191225];

const splitElement = (arr, num) => {
    return arr.map(el => {
        // 要素の文字数が num 以下ならそのまま返す
        if(String(el).length <= num){
            return el;
        };
        // 末尾から num 文字分を切り出す
        const part = String(el).substr(String(el).length - num, num);
        // 数値に変換できる場合は数値として、そうでなければ文字列として返す
        return +part || part;
    });
};

console.log(splitElement(arr, 2));
console.log(splitElement(arr, 1));
console.log(splitElement(arr, 4));

実行結果

コンソールへの出力は次のようになります。

[
    '', 19, 20, 21,
    22, 23, 24, 25
]
[
    '', 9, '0', 1,
    2, 3, 4, 5
]
[
    '', 1219, 1220,
    1221, 1222, 1223,
    1224, 1225
]

解説

注目すべきポイントは2つ目の出力結果です。n = 1 の場合、日付「20191220」の末尾は「0」ですが、単純に +part で数値化すると先頭のゼロが消えて 0 ではなく '0'（文字列）として扱われる点に注意が必要です。サンプルコードでは return +part || part; という記述により、数値化した結果が falsy（0など）になる場合は元の文字列をそのまま返すことで、この問題を回避しています。

なお、現在では非推奨とされる substr() の代わりに、String.prototype.slice(-num) を使うとより簡潔かつ安全に末尾の文字を取得できます。