--- 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)); // => "zil" console.log(text.substr(2,3)); // => "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)); // => "zil" console.log(text.slice(5, 2)); // => "" </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)); // => "Mo" console.log(text.substring(-5, -2)); // => "" </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)); // => "" console.log(text.slice(-5, -2)); // => "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 < 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>