---
title: String.prototype.substring()
slug: Web/JavaScript/Reference/Global_Objects/String/substring
tags:
- JavaScript
- Prototipo
- Referencia
- String
- metodo
- substring()
translation_of: Web/JavaScript/Reference/Global_Objects/String/substring
---
<p>{{JSRef("Global_Objects", "String")}}</p>
<h2 id="Summary" name="Summary">Resumo</h2>
<p>O método <code>substring()</code> retorna a parte da string entre os índices inicial e final, ou até o final da string.</p>
<h2 id="Syntax" name="Syntax">Sintaxe</h2>
<pre class="syntaxbox notranslate"><code><var>str</var>.substring(indexStart[, <var>indexEnd</var>])</code></pre>
<h3 id="Parameters" name="Parameters">Parâmetros</h3>
<dl>
<dt><code>indexStart</code></dt>
<dd>Um inteiro entre <code>0</code> e o comprimento da string (<code>str.length</code>), especificando a posição na string do primeiro caractere a ser incluído na substring retornada.</dd>
<dt><code>indexEnd</code></dt>
<dd>Opcional. Um inteiro entre <code>0</code> e o comprimento da string (<code>str.length</code>), especificando a posição na string do primeiro caractere a <strong>não</strong> ser mais incluído na substring retornada.</dd>
</dl>
<h3 id="Valor_retornado">Valor retornado</h3>
<p>Uma nova string contendo a parte especificada da string fornecida.</p>
<h2 id="Description" name="Description">Descrição</h2>
<p><code>substring()</code> extrai caracteres desde <code><em>indexStart</em></code> até, mas <strong>não</strong> <strong>incluindo</strong>, <code><em>indexEnd</em></code>. Em particular:</p>
<ul>
<li>Se <code><em>indexStart</em></code> é igual a <code><em>indexEnd</em></code>, <code>substring()</code> retorna uma string vazia.</li>
<li>Se <code><em>indexEnd</em></code> for omitido, <code>substring()</code> extrai caracteres até o fim da string.</li>
<li>Se qualquer argumento for menor que <code>0</code> ou {{jsxref("NaN")}}, ele será tratado como <code>0</code>.</li>
<li>Se qualquer argumento for maior que <code>stringName.length</code>, ele será tratado como se fosse <code>stringName.length</code></li>
</ul>
<p>Se <code>indexStart</code> for maior que <code>indexEnd</code>, então o efeito do <code>substring()</code> é como se os dois argumentos estivessem trocados, por exemplo, <code><em>str</em>.substring(1, 0) == <em>str</em>.substring(0, 1)</code>.</p>
<h2 id="Examples" name="Examples">Exemplos</h2>
<h3 id="Example_Using_substring" name="Example:_Using_substring">Usando <code>substring()</code></h3>
<p>O seguinte exemplo usa <code>substring()</code> para mostrar caracteres da palavra 'Mozilla':</p>
<pre class="brush:js notranslate">var anyString = "Mozilla";
// Mostra "Moz"
console.log(anyString.substring(0,3));
console.log(anyString.substring(3,0));
// Mostra "lla"
console.log(anyString.substring(4,7));
console.log(anyString.substring(7,4));
// Mostra "Mozill"
console.log(anyString.substring(0,6));
// Mostra "Mozilla"
console.log(anyString.substring(0,7));
console.log(anyString.substring(0,10));
</pre>
<h3 id="Usando_substring_com_length">Usando <code>substring()</code> com <code>length</code></h3>
<p>O exemplo a seguir usa o método <code>substring()</code> e a propriedade {{jsxref ("String.length", "length")}} para extrair os últimos caracteres de uma string específica. Este método pode ser mais fácil de lembrar, visto que você não precisa saber os índices inicial e final como faria nos exemplos acima.</p>
<pre class="brush: js notranslate">// Mostra 'illa', os últimos 4 caracteres
let anyString = 'Mozilla'
let anyString4 = anyString.substring(anyString.length - 4)
console.log(anyString4);
// Mostra 'zilla', os últimos 5 caracteres
let anyString = 'Mozilla'
let anyString5 = anyString.substring(anyString.length - 5)
console.log(anyString5);</pre>
<h3 id="A_diferença_entre_substring_e_substr">A diferença entre <code>substring()</code> e <code>substr()</code></h3>
<p>Há uma diferença sutil entre os métodos <code>substring()</code> e {{jsxref("String.substr", "substr()")}}, então você deve ter cuidado para não confundi-los.</p>
<p>Os argumentos de <code>substring()</code> representam os índices inicial e final, enquanto os argumentos de <code>substr()</code> representam o índice inicial e o número de caracteres a serem incluídos na string retornada.</p>
<p>Além disso, <code>substr()</code> é considerado um <strong>recurso legacy no ECMAScript </strong>e pode ser removido em versões futuras, portanto, é melhor evitar usá-lo, se possível.</p>
<pre class="brush: js notranslate">let text = 'Mozilla'
console.log(text.substring(2,5)) // retorna "zil"
console.log(text.substr(2,3)) // retorna "zil"</pre>
<h3 id="Diferenças_entre_substring_e_slice">Diferenças entre <code>substring()</code> e <code>slice()</code></h3>
<p>Os métodos <code>substring()</code> e {{jsxref("String.slice", "slice()")}} são quase idênticos, mas existem algumas diferenças sutis entre os dois, especialmente na forma como os argumentos negativos são tratados.</p>
<p>O método <code>substring()</code> troca seus dois argumentos se <code>indexStart</code> for maior que <code>indexEnd</code>, o que significa que uma string ainda será retornada. O método {{jsxref("String.slice", "slice()")}} retorna uma string vazia caso o mesmo ocorra.</p>
<pre class="brush: js notranslate">let text = 'Mozilla'
console.log(text.substring(5, 2)) // retorna "zil"
console.log(text.slice(5, 2)) // retorna ""</pre>
<p>Se um ou ambos os argumentos forem negativos ou <code>NaN</code>, o método <code>substring()</code> os tratará como se fossem <code>0</code>.</p>
<pre class="brush: js notranslate">console.log(text.substring(-5, 2)) // retorna "Mo"
console.log(text.substring(-5, -2)) // retorna ""</pre>
<p><code>slice()</code> também trata os argumentos <code>NaN</code> como <code>0</code>, mas quando recebe valores negativos, ele conta regressivamente a partir do final da string para encontrar os índices.</p>
<pre class="brush: js notranslate">console.log(text.slice(-5, 2)) // retorna ""
console.log(text.slice(-5, -2)) // retorna "zil"</pre>
<p>Veja a página {{jsxref("String.slice", "slice()")}} para mais exemplos com números negativos.</p>
<h3 id="Example_Replacing_a_substring_within_a_string" name="Example:_Replacing_a_substring_within_a_string">Substituindo uma <code>substring()</code> com uma string</h3>
<p>O seguinte exemplo substitui uma substring dentro de uma string. Ela irá substituir ambos caracteres e substrings individualmente. A função invocada na linha final do exemplo altera a string "<code style="font-style: normal;">Brave New World</code>" para "<code style="font-style: normal;">Brave New Web</code>".</p>
<pre class="brush:js notranslate">function replaceString(oldS, newS, fullS) {
// Substitui oldS por newS na string 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 que isto pode resultar em um loop infinito se <code>oldS</code> for um substring de <code>newS</code> -- por exemplo, se você tentou substituir "<code>World</code>" com "<code>OtherWorld</code>". O melhor método para substituir strings é o seguinte:</p>
<pre class="brush:js notranslate">function replaceString(oldS, newS,fullS){
return fullS.split(oldS).join(newS);
}</pre>
<p>O código acima serve como um exemplo para operações com substring. Se você precisa substituir substrings, na maioria das vezes você vai querer usar <span style="line-height: 1.5em;">{{jsxref("String.prototype.replace()")}}.</span></p>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Status</th>
<th scope="col">Comentário</th>
</tr>
<tr>
<td>ECMAScript 1st Edition.</td>
<td>Standard</td>
<td>Implementado no JavaScript 1.0</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('ES6', '#sec-string.prototype.substring', 'String.prototype.substring')}}</td>
<td>{{Spec2('ES6')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Navegadores_compatíveis">Navegadores compatíveis</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="See_also" name="See_also">Veja também</h2>
<ul>
<li>{{jsxref("String.prototype.substr()")}}</li>
<li>{{jsxref("String.prototype.slice()")}}</li>
</ul>