path: root/files/ja/web/javascript/reference/global_objects/string/substring/index.html

---
title: String.prototype.substring()
slug: Web/JavaScript/Reference/Global_Objects/String/substring
tags:
  - JavaScript
  - Method
  - Prototype
  - Reference
  - String
translation_of: Web/JavaScript/Reference/Global_Objects/String/substring
---
<div>{{JSRef}}</div>

<p><strong><code>substring()</code></strong> メソッドは <code>string</code> オブジェクトの開始・終了位置の間、または文字列の最後までの部分集合を返します。</p>

<div>{{EmbedInteractiveExample("pages/js/string-substring.html")}}</div>

<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="syntaxbox notranslate"><var>str</var>.substring(<var>indexStart</var>[, <var>indexEnd</var>])</pre>

<h3 id="Parameters" name="Parameters">引数</h3>

<dl>
 <dt><code><var>indexStart</var></code></dt>
 <dd>返される部分文字列の、最初の文字を含んだ位置です。</dd>
 <dt><code><var>indexEnd</var></code> {{optional_inline}}</dt>
 <dd>返される部分文字列から外される最初の文字の位置です。</dd>
</dl>

<h3 id="Return_value" name="Return_value">返値</h3>

<p>与えられた文字列から抽出された区間を含む新しい文字列です。</p>

<h2 id="Description" name="Description">解説</h2>

<p><code>substring()</code> は <code><var>indexStart</var></code> から <code><var>indexEnd</var></code> の直前までの文字を取り出します。特に、</p>

<ul>
 <li><code><var>indexEnd</var></code> が省略された場合、<code>substring()</code> は文字列の最後までの文字を取り出します。</li>
 <li><code><var>indexStart</var></code> が <code><var>indexEnd</var></code> と等しい場合、 <code>substring()</code> は空の文字列を返します。</li>
 <li><code><var>indexStart</var></code> が <code><var>indexEnd</var></code> より大きかった場合、 <code>substring()</code> は 2 つの引数が交換されたものとして実行されます。下記の例をご覧ください。</li>
</ul>

<p>引数が <code>0</code> 未満、または <code>stringName.length</code> を超えた場合、それはそれぞれ <code>0</code> と <code>stringName.length</code> として扱われます。</p>

<p>いずれかの引数が {{jsxref("NaN")}} の場合、それは <code>0</code> として扱われます。</p>

<h2 id="Examples" name="Examples">例</h2>

<h3 id="Using_substring" name="Using_substring">substring() の使用</h3>

<p>以下の例では <code>substring()</code> を使用して、 <code>Mozilla</code> という文字列から文字を取り出して表示します。</p>

<pre class="brush: js notranslate">let anyString = 'Mozilla'

// 'M' と表示
console.log(anyString.substring(0, 1))
console.log(anyString.substring(1, 0))

// 'Mozill' と表示
console.log(anyString.substring(0, 6))

// 'lla' と表示
console.log(anyString.substring(4))
console.log(anyString.substring(4, 7))
console.log(anyString.substring(7, 4))

// 'Mozilla' と表示
console.log(anyString.substring(0, 7))
console.log(anyString.substring(0, 10))
</pre>

<h3 id="Using_substring_with_length_property" name="Using_substring_with_length_property">substring() と length プロパティの使用</h3>

<p>次の例では <code>substring()</code> メソッドと {{jsxref("String.length", "length")}} プロパティを使用して、特定の文字列の最後の文字を抜き出しています。この方法では、上記の例と同じようあなたが最初と最後の位置を知っている必要がないこと考えると、覚えやすいかもしれません。</p>

<pre class="brush: js notranslate">// 最後の 4 文字の 'illa' を表示します
let anyString = 'Mozilla'
let anyString4 = anyString.substring(anyString.length - 4)
console.log(anyString4)

// 最後の 5 文字の 'zilla' を表示します
let anyString = 'Mozilla'
let anyString5 = anyString.substring(anyString.length - 5)
console.log(anyString5)
</pre>

<h3 id="The_difference_between_substring_and_substr" name="The_difference_between_substring_and_substr">substring() と substr() の違い</h3>

<p><code>substring()</code> メソッドと {{jsxref("String.substr", "substr()")}} メソッドとの間には微妙な違いがあるので、混乱しないように注意してください。</p>

<p><code>substring()</code> の引数は開始位置と終了位置を表しますが、 <code>substr()</code> の引数は開始位置と返される文字列に含まれる文字数を表します。</p>

<p>さらに、 <code>substr()</code> は <strong>ECMAScript の古い機能</strong>とみなされており、将来のバージョンでは削除される可能性があるため、できれば使用しないのが最良です。</p>

<pre class="brush: js notranslate">let text = 'Mozilla'
console.log(text.substring(2,5))  // =&gt; "zil"
console.log(text.substr(2,3))     // =&gt; "zil"</pre>

<h3 id="Differences_between_substring_and_slice" name="Differences_between_substring_and_slice">substring() と slice() の違い</h3>

<p><code>substring()</code> メソッドと {{jsxref("String.slice", "slice()")}} メソッドはほぼ同じですが、特に負の数の引数の扱いについて、いくつかの微妙な違いがあります。</p>

<p><code>substring()</code> メソッドは <code><var>indexStart</var></code> が <code><var>indexEnd</var></code> よりも大きい場合に二つの引数を交換するので、文字列が返されます。 {{jsxref("String.slice", "slice()")}} メソッドはこの場合には空文字列を返します。</p>

<pre class="brush: js notranslate">let text = 'Mozilla'
console.log(text.substring(5, 2))  // =&gt; "zil"
console.log(text.slice(5, 2))      // =&gt; ""
</pre>

<p>どちらかまたは両方の引数が負の数または <code>NaN</code> であった場合、 <code>substring()</code> メソッドはこれらを <code>0</code> として扱います。</p>

<pre class="brush: js notranslate">console.log(text.substring(-5, 2))  // =&gt; "Mo"
console.log(text.substring(-5, -2)) // =&gt; ""
</pre>

<p><code>slice()</code> も <code>NaN</code> の引数を <code>0</code> として扱いますが、負の数を指定した場合は、文字列の末尾からの文字数で位置を探します。</p>

<pre class="brush: js notranslate">console.log(text.slice(-5, 2))   // =&gt; ""
console.log(text.slice(-5, -2))  // =&gt; "zil"
</pre>

<p>負の数を使用した例は {{jsxref("String.slice", "slice()")}} のページをご覧ください。</p>

<h3 id="Replacing_a_substring_within_a_string" name="Replacing_a_substring_within_a_string">文字列内の部分文字列の置き換え</h3>

<p>次の例は、文字列内の部分文字列を置き換えます。これは単独の文字と部分文字列の両方を置き換えます。例の最後にある関数呼び出しは、 <code>Brave New World</code> という文字列を <code>Brave New Web</code> に置き換えます。</p>

<pre class="brush: js notranslate">// fullS という文字列内で oldS を newS に置き換えます。
function replaceString(oldS, newS, fullS) {
  for (let i = 0; i &lt; fullS.length; ++i) {
    if (fullS.substring(i, i + oldS.length) == oldS) {
      fullS = fullS.substring(0, i) + newS + fullS.substring(i + oldS.length, fullS.length)
    }
  }
  return fullS
}

replaceString('World', 'Web', 'Brave New World')
</pre>

<p>なお、これは <code>oldS</code> が <code>newS</code> の部分文字列である場合に無限ループに陥ります。 — 例えば、 '<code>World</code>' を '<code>OtherWorld</code>' で置き換える場合などです。</p>

<p>置き換えるのにより良い方法は以下の通りです。</p>

<pre class="brush: js notranslate">function replaceString(oldS, newS, fullS) {
  return fullS.split(oldS).join(newS)
}
</pre>

<p>上述のコードは、 substring の操作の例を提供します。部分文字列を置き換える必要があるとき、多くの場合 {{jsxref("String.prototype.replace()")}} を使用します。</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-string.prototype.substring', 'String.prototype.substring')}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("javascript.builtins.String.substring")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{jsxref("String.prototype.substr()")}}</li>
 <li>{{jsxref("String.prototype.slice()")}}</li>
</ul>