【JavaScript】文字列切り出しとは？sliceやsubstringなどの使い方を初心者向けにわかりやすく解説

はじめに

JavaScriptの文字列操作は、プログラミングを学び始める方にとって比較的なじみやすい分野ではないでしょうか。
一方で、いざ実際の場面で文字列を切り出す必要が出てきたとき、具体的なやり方がわからず悩むこともあるかもしれません。

たとえばユーザーの入力値が長すぎるので一部を省略したいとか、メールアドレスの一部を伏せ字にするなど、実務でもよくあるケースがあります。
このような場面で、JavaScriptにはいくつかのメソッドが用意されており、上手に使うことで開発効率を高めることができます。

本記事では、JavaScriptにおける文字列切り出しの基本となる考え方や、実装に役立つメソッドを紹介します。
それぞれのメソッドが持つ特徴や注意点を押さえておくと、思わぬバグを防ぎやすくなります。

この記事を読むとわかること

• JavaScriptの文字列を扱うための基礎的な概念
• slice() や substring()、substr() といった代表的なメソッドの使い方
• 文字列切り出しを実務でどう活用できるか
• 文字コードやマルチバイト文字（絵文字など）を扱う際の注意点
• コード例を通じて理解するJavaScriptでの文字列切り出しの実践的テクニック

JavaScriptで文字列を扱う基本

JavaScriptでは、文字列を表すためにString型が使われます。
たとえば const message = "Hello World!"; のような形で変数に文字列を代入し、その後いろいろな操作をすることが可能です。

ただし、JavaScriptでの文字列は変更不可能（イミュータブル）という性質を持っています。
つまり、特定のインデックスだけを書き換えることはできません。
何らかの部分を変える必要があるなら、新たに別の文字列を生成するイメージを持つと理解しやすいです。

また、実際に業務でのフォーム入力やAPIレスポンスなどを扱う場合、想定外の文字や記号、改行が混ざることがあります。
こうした状況に備えて、文字列の切り出しや整形を正しく行う技術を身につけると、不具合の予防に役立ちます。

文字列型とは

JavaScriptにおける文字列型（String）は、文字の集合を扱うためのデータ型です。
特にシングルクォート ''、ダブルクォート ""、テンプレートリテラル ` ` など、複数の書き方が存在しますが、これらは結果として同じString型を生成します。

文字列はバイト列ではなく、あくまで文字の連続として扱われる点が特徴です。
実際にはUnicodeという仕組みを使って、多言語や記号などを一元管理します。
ただし、Unicodeにはいわゆるサロゲートペアという概念もあるため、実際には1文字が複数のコード単位で表現される場合もあります。

たとえば絵文字や一部の漢字を扱う際、思わぬところで切り出しがずれてしまうことがある点には注意が必要です。
こうした背景を理解しておくと、後ほど紹介するメソッドの挙動をより深く把握できるでしょう。

文字列操作の全体像

文字列操作には、部分的に抽出したり、結合したり、分割したりとさまざまな手段があります。
今回のメインテーマは切り出しですが、実際には以下のような操作も併せて活用されることが多いです。

• split() を使った文字列の分割
• toUpperCase() や toLowerCase() を使った大文字・小文字変換
• replace() を使った置換
• trim() を使った前後の空白除去

これらの操作と組み合わせると、多様な文字列処理が可能になります。
たとえば、ログファイルから日時情報を抽出して解析したり、URLからクエリパラメータを切り出して別途管理するといったシーンが考えられます。

実務での使いどころ

文字列切り出しというと、まず思い浮かぶのは部分的な値の取得です。
ユーザーIDの先頭数文字だけを表示したり、商品コードの一部だけを画面に出して管理したりなど、情報を限定的に見せたいケースがあります。

さらに、たとえばメールアドレスを半分マスクして表示するときにも、切り出し操作が活躍します。
こうした実務的な観点では、「どこからどこまで切り出すか」と「切り出したい条件」が重要になります。
これらをコードで表現する際に活躍するのが、これから紹介するメソッドたちです。

文字列切り出しの概要

JavaScriptには、文字列を部分的に取り出すためのメソッドがいくつか存在します。
代表的なものとして slice()、substring()、そしてやや古めですが substr() があります。

これらは一見似ているようで、引数の取り方やマイナス値の扱いなどが異なります。
自分のやりたいことや対象環境などに合わせて、最適なメソッドを選ぶとよいでしょう。

実務的な観点では、文字列の位置指定をミスして範囲外の値を取らないように注意することが大切です。
また、複数人で開発する場合には、どのメソッドを使うかをチームで統一しておくとコードの可読性が高まります。

slice()メソッド

slice() は、開始位置（start）と終了位置（end）を指定して、その範囲内の文字列を新たに返します。
文字列自体は変更されません。

コピー
const text = "JavaScript String Slice";
const result = text.slice(0, 10);
console.log(result); // "JavaScript"

上記の例では、インデックス0からインデックス10の直前までを取得しています。
もし終了位置を省略すると、文字列の末尾まで切り出す挙動になります。

また、slice() ではマイナス値を指定できます。
たとえば slice(-5) のように書くと、文字列の末尾から5文字分を取り出すことが可能です。
これは手軽に終端部分の数文字を取得したいときに便利です。

substring()メソッド

substring() は、開始位置（startIndex）と終了位置（endIndex）を指定して文字列を切り出します。
似ているように見えますが、slice() と比べてマイナス値の扱いが異なるので注意が必要です。

コピー
const text = "JavaScript Substring";
const result = text.substring(4, 10);
console.log(result); // "Script"

もし引数にマイナス値を与えると、0として扱われます。
そのため、末尾から数文字を簡単に取りたいケースには、slice() のほうが扱いやすいかもしれません。

さらに、引数の大小が逆の場合には、メソッド側が自動的に小さいほうを開始位置、大きいほうを終了位置とみなします。
この点もslice() とは挙動が異なるので、意図した文字列を取るために正しい順序で指定するか、理解した上で使う必要があります。

substr()メソッド

substr() は、開始位置（start）と取得したい文字数（length）を指定して部分文字列を取り出します。
昔はよく使われたメソッドですが、現在は非推奨（廃止予定）とされることが多いです。

コピー
const text = "JavaScript Substr Method";
const result = text.substr(0, 4);
console.log(result); // "Java"

引数の最初が開始インデックスで、2番目の引数が取得したい長さを示します。
しかし、今後の仕様変更などを考慮すると、あまり積極的に使わないほうがよいとされています。

他のメソッドで代用可能な場面がほとんどなので、あえて substr() を選ぶ必要はあまりありません。
メンテナンス性や将来的な互換性を考えると、slice() か substring() を中心に使うのが一般的です。

文字列切り出しの応用例

実際の場面では、文字列を一部分だけ表示したり、必要な箇所だけ抜き出すというケースが多く存在します。
ここからはもう少し具体的な応用シーンを見ていきましょう。

ユーザー名や入力情報の一部抽出

ユーザー名が長すぎる場合、画面表示を整えるために先頭数文字だけを表示し、残りを省略するという方法が考えられます。
たとえば「TaroYamada」という名前から、最初の5文字「TaroY」だけを切り出すようなイメージです。

コピー
function abbreviateName(name) {
  if (name.length > 5) {
    return name.slice(0, 5) + "...";
  }
  return name;
}

console.log(abbreviateName("TaroYamada")); // "TaroY..."
console.log(abbreviateName("Sato"));       // "Sato"

上記のように切り出した後、末尾に「...」をつけるだけで視認性が高まります。
ブログやSNSのアプリケーションなど、表示領域が限られるUIでは比較的よく使われる手法です。

入力フォームでのバリデーション時にも、不要な文字列をあらかじめ除外したいケースがあります。
たとえば、許容文字数を超えた分は無視するといった処理を行う場合に、文字列切り出しメソッドが役立ちます。

製品コードや日付情報を扱うケース

商品コードや日付など、形式がある程度決まっている文字列の一部を取り出すのにも使われます。
「頭から2文字が国コードを示し、次の4文字が商品カテゴリを示す」といったルールが決まっているなら、その位置を slice() などで取り出して使います。

たとえば日付の文字列が "2025-02-15" のようなISO形式で与えられるケースを考えてみましょう。
年だけを取り出したいなら、先頭4文字を切り出せばOKです。

コピー
function getYear(dateString) {
  return dateString.slice(0, 4);
}

console.log(getYear("2025-02-15")); // "2025"

また、同様に月と日を分けて取得したいときには、さらに細かいインデックスを指定します。
こうしたコードを共通関数としてまとめておくと、開発チーム全体の効率が上がります。

正規表現を使った切り出し

文字列切り出しをやや複雑な条件で行いたい場合、正規表現を活用する手があります。
例えば、特定の文字列に囲まれた部分だけ取り出したい場合などです。

コピー
const text = "【商品】テレビ / [ブランド]Sony";
const regex = /【商品】(.*?) \/ \[ブランド\](.*)/;
const match = text.match(regex);

if (match) {
  const productName = match[1];
  const brandName = match[2];
  console.log(productName); // "テレビ"
  console.log(brandName);   // "Sony"
}

上記では、正規表現を用いて「【商品】」と「[ブランド]」で囲まれた情報をそれぞれ取得しています。
単純なインデックス指定では難しいケースも、正規表現なら柔軟に対応できる点が強みです。

ただし、正規表現を使うとコードの可読性が下がる場合もあるため、目的に応じて使い分けましょう。
また、複雑になりすぎる場合はパフォーマンスにも注意する必要があります。

文字列と文字コードの関係

文字列切り出しを扱ううえで意外と見落としがちなのが、文字コードの問題です。
JavaScriptの内部では、文字がUnicodeとして扱われており、実際には「コードユニット」という単位で管理されています。

たとえば、1つの見た目の文字が複数のコードポイントで構成されているケースがあり、ここを単純に slice() などで切り分けると、想定外の表示になる可能性があります。
絵文字や一部の拡張漢字がこれに該当することが多いです。

サロゲートペアへの考慮

Unicodeには、サロゲートペア（High SurrogatesとLow Surrogates）と呼ばれる仕組みがあり、基本多言語面外の文字を2つのコードユニットで表現します。
たとえば「𠮟（しかるの旧字）」などの一部の漢字や、多くの絵文字はサロゲートペアを使うことで表示されています。

この場合、slice() でコードユニット単位で分割してしまうと、文字が分割されて「�」のような表示になってしまうことがあります。
もしサロゲートペアを安全に扱いたい場合は、単純なslice() や substring() ではなく、外部のライブラリを活用する方法を検討する方がよいかもしれません。

もちろん、一般的な日本語やアルファベット・数字のみの文字列であればこうした問題は起こりにくいです。
しかし、ユーザーからの入力であったり多言語対応が必要な場合には、注意しておく必要があります。

マルチバイト文字の切り出し

日本語を含むマルチバイト文字が登場すると、文字コードの問題はさらに複雑になります。
たとえば文字化けや半角・全角の混在が起こった場合、どこからが全角でどこまでが半角なのかよくわからなくなることがあります。

こういったケースでは、最初に全角や半角を変換する処理を入れたり、データベースで扱う際に正規化を行ったりしておくことが望ましいです。
文字列切り出しの前後でデータを整形しておけば、予期せぬトラブルを減らせます。

もしマルチバイト文字を正確に扱う必要があるなら、正規表現の u フラグを使う方法があります。
たとえば /\p{Script=Hiragana}/u のような正規表現を使うと、ひらがなだけを正しく認識できる場合があります。
ただし、環境によってはまだ完全にサポートされていない場合もあるため、実務で利用する際は事前テストが欠かせません。

文字列切り出しに役立つ実務TIPS

文字列切り出しを実務で使うときには、知っておくと便利なポイントがいくつかあります。
バグを減らし、トラブルを回避するためにも押さえておきたいところです。

パフォーマンスを意識する

大規模なデータを取り扱う場面では、文字列切り出しが頻繁に行われるとパフォーマンスに影響する可能性があります。
たとえば何万行ものテキストを毎回ループしながら切り出すような場合、不要な処理を減らす工夫が必要です。

必要に応じて、まずは文字列を一度だけ前処理し、無駄な切り出し回数を減らす手法を検討してみてください。
ログ解析やバッチ処理など、大量データを扱うシーンでは特に有効な考え方です。

さらに、Node.jsのサーバーサイドで文字列を処理する場合、Buffer やストリームの仕組みを使って一気にデータを扱わないようにするアプローチも考えられます。
ただし、あまり複雑にしすぎると管理が難しくなるので、まずは素直にメモリに収める方法から検討するのも一つの手です。

エラーを避けるための事前チェック

文字列の長さが想定よりも短い場合、切り出し範囲を間違えると空文字列が返ってきたり、何も返ってこないということがあります。
これが原因で表示が崩れたり、後続の処理がエラーを起こすケースがあるので要注意です。

コピー
function safeSlice(str, start, end) {
  if (str.length < start) {
    return "";
  }
  if (str.length < end) {
    return str.slice(start);
  }
  return str.slice(start, end);
}

上記のような関数を用意して、事前に文字列の長さを確認する実装を入れるのも一つの方法です。
ちょっと手間をかけるだけで、実際には予防できるトラブルが増えるでしょう。

まとめ

文字列切り出しは、JavaScriptを使い始めたばかりの方でも理解しやすい分野です。
しかし、実務では文字コードの問題やパフォーマンスへの考慮が必要になるなど、意外と奥が深い一面があります。

slice() はマイナスインデックスも扱える便利なメソッドで、末尾側からの切り出しを行いやすいです。
一方の substring() は負の値に対応していないため、単純な範囲指定で使いたい場合に向いています。
substr() は非推奨となりつつあるため、新しくコードを書く際には極力使わないほうがいいでしょう。

さらに、正規表現を使って複雑なパターンを切り出したり、マルチバイト文字やサロゲートペアを取り扱う必要があったりすると、より注意深い実装が求められます。
こうした細かい注意点を事前に理解しておくと、エラーを少なくし、開発効率を高めることが可能です。

皆さんのプロジェクトでも、ユーザー入力の制限やデータの表示に文字列切り出しが関わってくることは多いでしょう。
まずは小さいコード例から試してみて、挙動を理解するところから始めてみるのはいかがでしょうか。

その中で自分たちの開発状況や要件に合った方法を選ぶことが、最終的には高品質なアプリケーションにつながるはずです。
ぜひ本記事を参考に、JavaScriptでの文字列切り出しを実務へ生かしてみてください。