--- 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>