【JavaScript】文字列の先頭から指定した文字数を取得する方法｜slice・substringと省略表示（…）・絵文字対策まで解説

2024.04.03

JavaScriptで「文字列の先頭から3文字だけ取り出したい」のように、先頭から指定した文字数を取得したい場面はよくあります。一覧表示で長いテキストを途中で切って「…」を付けたり、コードの先頭の区分だけを取り出したりするケースです。

結論はシンプルで、slice(0, 文字数) または substring(0, 文字数) を使います。この記事では基本の取得方法から、文字数が足りないとき・絵文字を含むときの挙動、末尾に「…」を付ける省略表示、そして紛らわしい「先頭N文字を削除して残りを取得」との違いまで解説します。

この記事の結論：先頭からN文字を取得するなら str.slice(0, n) が基本です。（先頭からN文字を削除して残りが欲しい場合は str.slice(n) と、第2引数の有無で逆の意味になる点に注意してください。）
スポンサーリンク

slice() で先頭からN文字を取得する（推奨）

slice(開始, 終了) は開始位置から終了位置の手前までを取り出します。先頭からなら開始を 0、終了を取得したい文字数にします。

slice() で先頭N文字を取得
const str = "abcdefg";
const n = 3; // 取得したい文字数

const result = str.slice(0, n);
console.log(result); // "abc"

substring() で取得する

substring(開始, 終了) も同じく 0 と文字数を渡せば先頭N文字を取得できます。先頭から取り出す用途では slice() と結果は同じです。

substring() で先頭N文字を取得
const str = "abcdefg";
const n = 3;

const result = str.substring(0, n);
console.log(result); // "abc"
開始位置を 0 以外にして「途中から文字数を指定して取得」したい場合は、開始位置と文字数を指定して取得する方法で詳しく解説しています。

文字数が足りない・0・負のときの挙動

取得したい文字数が実際の長さより大きくてもエラーにはならず、取れるだけ取って返します。安全に使えるので、長さチェックを省略できるケースも多いです。

境界の挙動
const str = "abc";

console.log(str.slice(0, 10)); // "abc"（足りなくても全部返る）
console.log(str.slice(0, 0));  // ""（0文字）
console.log(str.slice(0, -1)); // "ab"（負の終了は末尾からの位置 → 末尾1文字を除く）
負の値の扱いはメソッドで異なります。slice(0, -1) は「末尾の1文字を除く」になりますが、substring(0, -1) は負の値を 0 とみなすため ""（空文字）になります。計算結果が負になりうるときは挙動を意識して使い分けてください。

末尾に「…」を付けて省略表示する（truncate）

一覧やカードで長いテキストを切り詰めるときは、先頭N文字＋「…」がよく使われます。元が短いときは「…」を付けないよう、長さで分岐します。

truncate（省略表示）
function truncate(str, n) {
  return str.length > n ? str.slice(0, n) + "…" : str;
}

console.log(truncate("これは長めのテキストです", 6)); // "これは長めの…"
console.log(truncate("短い", 6));                   // "短い"（そのまま）

【混同注意】「先頭N文字を削除して残りを取得」との違い

「先頭からN文字」という言葉は、先頭N文字を取得するのか、先頭N文字を削除して残りを取得するのかで真逆になります。slice() の第2引数の有無で切り替わるので注意しましょう。

取得 vs 削除（残りを取得）
const str = "abcdefg";
const n = 3;

// 先頭から n 文字を「取得」する
console.log(str.slice(0, n)); // "abc"

// 先頭から n 文字を「削除」して残りを取得する
console.log(str.slice(n));    // "defg"
「特定の文字より後ろをまるごと削除したい」場合は指定した文字以降の文字列を削除する方法も参考になります。

【注意】絵文字・サロゲートペアを含む場合

slice() はUTF-16のコード単位で数えるため、絵文字（😀 など）のように2コード単位で1文字を表すサロゲートペアを途中で切ると文字化けします。見た目の1文字（コードポイント）単位で取得したいときは [...str] で配列化してから切り出します。

コードポイント単位で先頭N文字
// 先頭が絵文字（\u{1F600} = 絵文字1文字）の文字列
const str = "\u{1F600}abc";

console.log(str.slice(0, 1)); // 壊れた半端な文字（絵文字の片割れ）

// 対策: コードポイント単位で取得
function firstChars(str, n) {
  return [...str].slice(0, n).join("");
}
console.log(firstChars(str, 1)); // 絵文字1文字（壊れない）
console.log(firstChars(str, 2)); // 絵文字 + "a"

方法の使い分け

やりたいこと 書き方
先頭からN文字を取得 str.slice(0, n) / str.substring(0, n)
先頭N文字を削除して残りを取得 str.slice(n)
末尾に「…」を付けて省略 str.length > n ? str.slice(0, n) + "…" : str
絵文字を崩さず先頭N文字 [...str].slice(0, n).join("")
末尾からN文字を取得 str.slice(-n)（詳細）

よくある質問（FAQ）

Q先頭からN文字を取得する一番簡単な方法は？
Astr.slice(0, n) です。開始位置 0・終了位置に取得したい文字数を渡します。str.substring(0, n) でも同じ結果になります。
Qslice(0, n) と slice(n) は何が違うのですか？
A意味が逆です。slice(0, n) は先頭からN文字を取得（"abc"）、slice(n) は先頭N文字を削除して残りを取得（"defg"）します。第2引数の有無で逆になるので注意してください。
Q指定した文字数より文字列が短いとどうなりますか？
Aエラーにはならず、あるぶんだけ取得して返します。例えば "abc".slice(0, 10) は "abc" を返します。そのため事前の長さチェックを省ける場面も多いです。
Q絵文字を含むと先頭N文字がずれるのはなぜですか？
Aslice() はUTF-16のコード単位で数え、絵文字（サロゲートペア）は2単位で1文字だからです。[...str].slice(0, n).join("") のようにコードポイント単位の配列にしてから取得すると、見た目の文字数で正しく切り出せます。

まとめ

JavaScriptで文字列の先頭から指定した文字数を取得する方法のポイントを整理します。

  • 先頭からN文字の取得は str.slice(0, n)（substring(0, n) も同じ）
  • 文字数が足りなくてもエラーにならず、取れるぶんだけ返る
  • slice(0, n)（取得）と slice(n)（先頭N文字を削除して残り）は逆の意味
  • 省略表示は str.length > n ? str.slice(0, n) + "…" : str
  • 絵文字を含むなら [...str].slice(0, n).join("") でコードポイント単位に

対になる末尾から指定した文字数を取得する方法や、開始位置と文字数を指定して取得する方法、特定の文字の直前・直後の1文字を取得する記事もあわせて確認すると理解が深まります。