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

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

<p><strong><code>substring()</code></strong><font><font>메소드는 string 객체의 시작 인덱스로 부터 종료 인덱스 전 까지 문자열의 부분 문자열을 반환합니다. </font></font></p>

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



<h2 id="사용방법">사용방법 </h2>

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

<h3 id="인자값">인자값</h3>

<dl>
 <dt><code><var>indexStart</var></code></dt>
 <dd>반환문자열의 시작 인덱스 </dd>
 <dt> </dt>
 <dt><code><var>indexEnd</var></code></dt>
 <dd>옵션.  반환문자열의 마지막 인덱스 (포함하지 않음.)</dd>
</dl>

<h3 id="반환값">반환값</h3>

<p>기존문자열의  부분 문자열을 반환합니다. </p>

<h2 id="Description">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> 메서드는 마치 두 개의 인자를 바꾼 듯 작동하게 됩니다. 아래 예제를 보세요.</li>
</ul>

<p>0보다 작은 인자 값을 가지는 경우에는 0으로, <code>stringName.length</code> 보다 큰 인자 값을 가지는 경우, <code>stringName.length</code> 로 처리됩니다. {{jsxref("NaN")}} 값은 0으로 처리됩니다.</p>

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

<h3 id="Using_substring()">Using <code>substring()</code></h3>

<p>The following example uses <code>substring()</code> to display characters from the string <code>'Mozilla'</code>:</p>

<pre class="brush: js">var anyString = 'Mozilla';

// Displays 'M'
console.log(anyString.substring(0, 1));
console.log(anyString.substring(1, 0));

// Displays 'Mozill'
console.log(anyString.substring(0, 6));

// Displays 'lla'
console.log(anyString.substring(4));
console.log(anyString.substring(4, 7));
console.log(anyString.substring(7, 4));

// Displays 'Mozilla'
console.log(anyString.substring(0, 7));
console.log(anyString.substring(0, 10));
</pre>

<h3 id="Using_substring()_with_length_property">Using <code>substring()</code> with <code>length</code> property</h3>

<p>The following example uses the <code>substring()</code> method and {{jsxref("String.length", "length")}} property to extract the last characters of a particular string. This method may be easier to remember, given that you don't need to know the starting and ending indices as you would in the above examples.</p>

<pre class="brush: js">// Displays 'illa' the last 4 characters
var anyString = 'Mozilla';
var anyString4 = anyString.substring(anyString.length - 4);
console.log(anyString4);

// Displays 'zilla' the last 5 characters
var anyString = 'Mozilla';
var anyString5 = anyString.substring(anyString.length - 5);
console.log(anyString5);
</pre>

<h3 id="The_difference_between_substring()_and_substr()">The difference between <code>substring()</code> and <code>substr()</code></h3>

<p>There's a subtle difference between the <code>substring()</code> and {{jsxref("String.substr", "substr()")}} methods, so you should be careful not to get them confused.</p>

<p>The arguments of <code>substring()</code> represent the starting and ending indexes, while the arguments of <code>substr()</code> represent the starting index and the number of characters to include in the returned string.</p>

<pre class="brush: js">var 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()">Differences between <code>substring()</code> and <code>slice()</code></h3>

<p>The <code>substring()</code> and {{jsxref("String.slice", "slice()")}} methods are almost identical, but there are a couple of subtle differences between the two, especially in the way negative arguments are dealt with.</p>

<p>The <code>substring()</code> method swaps its two arguments if <code><var>indexStart</var></code> is greater than <code><var>indexEnd</var></code>, meaning that a string is still returned. The {{jsxref("String.slice", "slice()")}} method returns an empty string if this is the case.</p>

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

<p>If either or both of the arguments are negative or <code>NaN</code>, the <code>substring()</code> method treats them as if they were <code>0</code>.</p>

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

<p><code>slice()</code> also treats <code>NaN</code> arguments as <code>0</code>, but when it is given negative values it counts backwards from the end of the string to find the indexes.</p>

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

<p>See the {{jsxref("String.slice", "slice()")}} page for more examples with negative numbers.</p>

<h3 id="Replacing_a_substring_within_a_string">Replacing a substring within a string</h3>

<p>The following example replaces a substring within a string. It will replace both individual characters and substrings. The function call at the end of the example changes the string <code>Brave New World</code> to <code>Brave New Web</code>.</p>

<pre class="brush: js">// Replaces oldS with newS in the string fullS
function replaceString(oldS, newS, fullS) {
  for (var 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>Note that this can result in an infinite loop if <code>oldS</code> is itself a substring of <code>newS</code> — for example, if you attempted to replace 'World' with 'OtherWorld' here. A better method for replacing strings is as follows:</p>

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

<p>The code above serves as an example for substring operations. If you need to replace substrings, most of the time you will want to use {{jsxref("String.prototype.replace()")}}.</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-string.prototype.substring', 'String.prototype.substring')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-string.prototype.substring', 'String.prototype.substring')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-15.5.4.15', 'String.prototype.substring')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ES1')}}</td>
   <td>{{Spec2('ES1')}}</td>
   <td>Implemented in JavaScript 1.0.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>

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

<h2 id="See_also">See also</h2>

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