文字列を切り出す・整える — slice と trim

長い文字列から一部だけ欲しいことは、よくあります。日付から年だけ、ファイル名から拡張子だけ。 その基本が slice() です。

const word = 'JavaScript';

console.log(word.slice(0, 4));
console.log(word.slice(4));

console.log('0123456789'.slice(2, 5));

終わりの番号は「含まない」

slice(start, end) の end は、そこまでであってそこを含みません。

const word = 'JavaScript';

console.log(word.slice(4));
console.log('[' + word.slice(99) + ']');

const file = 'report.pdf';

console.log(file.slice(-3));
console.log(file.slice(-4));
console.log('abcdef'.slice(2, -1));

2番目から始まり、5番目の手前で止まります。取れるのは3文字です。

end - start が取れる長さになる、と覚えると数えやすくなります。 5 - 2 で3文字です。

第2引数を省くと、最後まで取ります。

const word = 'JavaScript';

console.log(word.slice(-6));
console.log(word.substring(-6));

const digits = '0123456789';

console.log('[' + digits.slice(5, 2) + ']');
console.log('[' + digits.substring(5, 2) + ']');

範囲の外を指してもエラーにはなりません。空文字列が返ります。 上の角括弧は、空文字列であることを見えるようにするために足したものです。

負の数で後ろから数える

slice() には負の番号を渡せます。-1 が最後の文字です。

const input = '  こんにちは  ';

console.log('[' + input.trim() + ']');
console.log('[' + input.trimStart() + ']');
console.log('[' + input.trimEnd() + ']');

console.log('[' + '\n\t あ \t\n'.trim() + ']');
console.log('[' + '　全角空白　'.trim() + ']');
console.log(' '.trim().length);

slice(2, -1) は「2番目から、最後の1文字の手前まで」という意味になります。 末尾を1文字だけ落としたいときによく使います。

substring() との違い

同じような働きをする substring() があります。ですが、負の数の扱いが違います。

console.log('​'.trim().length);

console.log('7'.padStart(3, '0'));
console.log('7'.padEnd(3, '0'));
console.log('日付: ' + String(7).padStart(2, '0'));

substring() は負の数を 0 として扱います。後ろから数えてくれません。

さらに、引数の大小が逆のときの動きも違います。

console.log('[' + '1'.padStart(3) + ']');

console.log('abcd'.padStart(2, '0'));

substring() は2つの引数を勝手に入れ替えます。slice() は素直に空文字列を返します。

迷ったら slice() を使ってください。 配列の slice() と考え方が同じで、覚え直しが要りません。 substring() の「勝手に入れ替える」挙動は、書き間違いを黙って通してしまいます。

前後の空白を落とす

入力欄から受け取った文字列には、たいてい余計な空白が付いています。trim() が落とします。

console.log('5'.padStart(4, 'ab'));

console.log('abc'.repeat(3));
console.log('─'.repeat(10));

落とすのは前後だけです。 真ん中の空白は残ります。

全角の空白も改行も落ちる

trim() が落とすのは半角スペースだけではありません。

const file = 'report.pdf';

console.log(file.substring(-3));

const input = '  こんにちは  ';

input.trim();

console.log('[' + input + ']');

改行、タブ、全角スペース、そして  （ノーブレークスペース）も落ちます。 Webの入力欄から来る空白は、たいていこれで足ります。

落ちない空白がある

ただしゼロ幅スペース（​）は落ちません。

見た目には何も無いのに、長さは1のままです。 Webページからコピーした文字列に紛れ込むことがあります。 「空白を消したのに一致しない」ときは、これを疑ってください。

桁を揃える

padStart() は、指定した長さになるまで先頭を埋めます。

第2引数を省くと半角スペースで埋まります。

すでに長いときは何もしません。切り詰めはしません。

埋める文字が複数あるときは、必要な分だけ使われて途中で切られます。

繰り返す

repeat() は同じ文字列を並べます。区切り線を作るときに使えます。

よくある間違い

負の数を substring() に渡す

拡張子だけ取るつもりが、全部返ってきます。エラーが出ないので気づきにくい間違いです。 slice(-3) に変えれば pdf が取れます。

trim() の結果を使い忘れる

第1回で見たとおり、文字列は書き換えられません。 trim() は新しい文字列を返すだけで、元の input は変わりません。戻り値を受け取ってください。

まとめ

• slice(start, end) の end は含まない。取れる長さは end - start
• 負の数は後ろから。slice(-3) で末尾3文字
• substring() は負を0にし、引数を勝手に入れ替える。slice() を使う
• trim() は前後だけ。全角空白・改行・ノーブレークスペースも落ちる
• ゼロ幅スペースは落ちない。 「消したのに一致しない」の原因になる
• padStart() は桁揃え。すでに長ければ何もしない

次に学ぶ

文字列の中から目的の文字を探す方法を学びます。 includes() と indexOf() の使い分け、大文字小文字を無視した検索、 そして分けてつなぎ直す split() と join() を扱います。

→ 第3回: 文字列を探す・分ける・置き換える