Javascript 指定の文字数で改行

Question

前提・実現したいこと

文字列を指定の文字数ごとに改行して表示し、
指定の文字数に満たない場合はそのまま表示したい。

例　4文字ごとに改行
AAAABBBBCCC　

↓　

AAAA
BBBB
CCC

発生している問題・エラーメッセージ

3行目でundefinedとなってしまう。

該当のソースコード

const title = AAAABBBBCCC;
const title_4 = title.match(/.{4}/g);

for( let n = 0; n <= title_4.length; n++ ) {
console.log( title_4[n] );
}

試したこと

match()を使っているので条件に合わなくなると表示されなくなるのかと思い
他の方法を考えたがどうすればいいかわからない。
よろしくお願い致します。

Answer 1

undefinedになってしまうのはループ回数がおかしいからでしょう。title_4の全要素にアクセスしたいのなら、ループ継続条件はn <= title_4.length ではなく n < title_4.length です。

4文字に満たない部分も同じ様に処理したいなら、正規表現は /.{1,4}/g (最長4文字まででにマッチ)がよいかと思います。

Comments

[n39]

ありがとうございました。
/.{1,4}/g で範囲を正確に指定することで解決しました。

Answer 2

考え方：

いかに既存のアリもののコピペでササッと済ませるか、をテーマに考えてみました。

'AAAABBBBCCC' を一文字ごとの配列にバラして、4文字ごとに chunk すりゃええ
➡ そしたら、いつものlodash大先生頼みや
➡ いや待てよ。。。lodash大先生ごっつかさばるゆうて、最近入れない現場も多いやんな･･･
➡ そしたら、こっちのchunk借りよ。

コード例:

…ゆうことで、こんなん出ましたけど～

// 以下より借用
// https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore#_chunk
const chunk = (input, size) => {
  return input.reduce((arr, item, idx) => {
    return idx % size === 0
      ? [...arr, [item]]
      : [...arr.slice(0, -1), [...arr.slice(-1)[0], item]];
  }, []);
};

// 上記のchunkを使用して、文字列を4文字ずつ区切った部分文字列の配列を作る。
const title = 'AAAABBBBCCC';

const title_4 = chunk([...title], 4).map(a => a.join(''));

console.log(title_4);

➡ サンプル

Comments

[n39]

考え方やコード例まで親切にご教授いただきありがとうございました。
chunkなどまだ知らないことも知ることができ非常に勉強になりました。
今回は元のコードを一部修正するだけで解決したので他の方の回答をベストアンサーに選びましたが
また次回も回答いただけましたら幸いです。