path: root/files/pt-br/web/javascript/reference/global_objects/string/substring/index.html

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