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

---
title: String.prototype.slice()
slug: Web/JavaScript/Reference/Global_Objects/String/slice
tags:
  - JavaScript
  - Prototipo
  - Reference
  - String
  - metodo
translation_of: Web/JavaScript/Reference/Global_Objects/String/slice
---
<div>{{JSRef("Global_Objects", "String")}}</div>

<h2 id="Summary" name="Summary">Sumário</h2>

<p>O método <code>slice()</code> extrai uma parte de uma string e a retorna como uma nova string, sem modificar a string original.</p>

<h2 id="Syntax" name="Syntax">Sintaxe</h2>

<pre class="syntaxbox notranslate"><code><var>str</var>.slice(<var>startIndex</var>[, <var>endIndex</var>])</code></pre>

<h3 id="Parameters" name="Parameters">Paramêtros</h3>

<dl>
 <dt><code>startIndex</code></dt>
 <dd>É o índice, de base zero, onde se inicia a extração. Se for um número negativo, será o mesmo que executar <em><code>str.length + startIndex</code></em> (por exemplo, se <em><code>startIndex</code></em> for <em><code>-3</code></em>, será o mesmo que executar <em><code>str.length - 3</code></em>).</dd>
 <dd>
 <pre class="brush: js notranslate">const nome = 'Ricardo';
console.log(nome.slice(-3)); // retorna 'rdo'</pre>
 </dd>
</dl>

<dl>
 <dd>Se <em><code>startIndex</code></em> for maior ou igual a <code><var>str</var><em>.length</em></code>, uma string vazia será retornada.</dd>
 <dd>
 <pre class="brush: js notranslate">const nome = 'Ricardo';
console.log(nome.slice(7)); // retorna &lt;empty string&gt;'
</pre>
 </dd>
 <dt><code>endIndex</code></dt>
 <dd>Opcional. É o índice, de base zero, onde termina a extração. O caractere que possuir este índice não será incluso.</dd>
 <dd>Se omitido ou possuir valor de <em><code>undefined</code></em>, ou for maior que <code><var>str</var><em>.length</em></code>, <em><code>slice()</code></em> extrairá até o fim da string.</dd>
 <dd>
 <pre class="brush: js notranslate">const nome = 'Ricardo';

// omitindo fimSlice
console.log(nome.slice(0)); // retorna 'Ricardo'

// undefined fimSlice
let i; // variável criada sem atribuir valor
console.log(nome.slice(0, i)); // retorna 'Ricardo'

// passando número maior que o tamanho da string
console.log(nome.slice(0, 7)); // retorna 'Ricardo'</pre>
 </dd>
 <dd>Se negativo, é o mesmo que executar <em><code>str.length + endIndex</code></em> onde <em><code>str.length</code></em> é o tamanho da string (por exemplo, se <em><code>endIndex</code></em> é <em><code>-3</code></em>, é como executar <code><em>str.length - 3</em></code>).</dd>
</dl>

<dl>
 <dd>
 <pre class="brush: js notranslate">const nome = 'Ricardo';<strong>
</strong>console.log(nome.slice(0, -3)); // retorna 'Rica'
</pre>
 </dd>
 <dd>Se for um valor diferente de indefinido e, ao mesmo tempo não for um número, uma string vazia será retornada</dd>
 <dd>
 <pre class="brush: js notranslate">const nome = 'Ricardo';
let i; // variável criada sem valor atribuído

// passando algum valor ≠ de undefined e ≠ de número
console.log(nome.slice(0, NaN)); // retorna &lt;empty string&gt;
console.log(nome.slice(2, false)); // retorna &lt;empty string&gt;
console.log(nome.slice(5, i)); // retorna 'Ricardo'
</pre>

 <p>Se <code><var>endIndex</var></code> for definido e <code><var>startIndex</var></code> for negativo, <code><var>endIndex</var></code> deve ser negativo também, do contrário uma string vazia é retornada.</p>

 <pre class="brush: js notranslate">const nome = 'Ricardo';
console.log(nome.slice(-3, 0)); // retorna &lt;empty string&gt;
</pre>

 <p>Caso <code><var>endIndex</var></code> seja definido e <code><var>startIndex</var></code> e <code><var>endIndex</var></code> sejam ambos positivos ou negativos, <code><var>endIndex</var></code> deve ser maior que <code><var>startIndex</var></code>, do contrário uma string vazia é retornada.</p>

 <pre class="brush: js notranslate">const nome = 'Ricado';
console.log(nome.slice(-1, -3)); // retorna &lt;empty string&gt;
console.log(nome.slice(3, 1)); // retorna &lt;empty string&gt;
</pre>
 </dd>
</dl>

<h3 id="Retorno">Retorno</h3>

<p>Uma nova string contento a porção extraída da string.</p>

<h2 id="Description" name="Description">Descrição</h2>

<p><em><code>slice()</code></em> extrai um texto de uma string e retorna uma nova string. Modificações realizadas no texto de uma string não afetam a outra string.</p>

<p><em><code>slice()</code></em> extrai até, mas não inclue <em><code>endIndex</code>.</em><br>
 <br>
 <code><em>str.slice(1, 4)</em></code> extrai a partir do segundo caractere até o quarto caractere (ou seja, os caracteres de índices <em><code>1</code></em>, <em><code>2</code></em>, e <em><code>3</code></em>).</p>

<p>Por exemplo, <em><code>str.slice(2, -1)</code></em> extrai a partir do terceiro carácter até o penúltimo caractere da string.</p>

<pre class="brush: js notranslate">const nome = 'Ricardo';
console.log(nome.slice(2, -1)); // retorna 'card'
</pre>

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

<h3 id="Example_Using_slice_to_create_a_new_string" name="Example:_Using_slice_to_create_a_new_string">Exemplo: Usando <code>slice()</code> para criar uma nova string</h3>

<p>O exemplo a seguir usa <em><code>slice()</code></em> para criar uma nova string.</p>

<pre class="brush: js notranslate">var str1 = 'A manhã está sobre nós', // o tamanho de str1 é 22
    str2 = str1.slice(3, 10),
    str3 = str1.slice(2, -2),
    str4 = str1.slice(13),
    str5 = str1.slice(22);
console.log(str2); // retorna 'anhã es'
console.log(str3); // retorna 'manhã está sobre n'
console.log(str4); // retorna 'sobre nós'
console.log(str5); // retorna &lt;empty string&gt;
</pre>

<h3 id="Example_Using_slice_with_negative_indexes" name="Example:_Using_slice_with_negative_indexes">Exemplo: Usando <code>slice()</code> com índices negativos.</h3>

<p>O exemplo a seguir usa o <em><code>slice()</code></em> com índices negativos.</p>

<pre class="brush: js notranslate">var str = 'A manhã está sobre nós';
str.slice(-3);     // retorna 'nós'
str.slice(-3, -1); // retorna 'nó'
str.slice(0, -1);  // retorna 'A manhã está sobre nó'
</pre>

<p>O exemplo abaixo percorre o índice no sentido anti-horário (de trás para frente) até chegar ao índice 11 da string, que será o início. Logo após, percorre o índice da string no sentido horário até chegar ao índice 16 da string, que será o fim.</p>

<pre class="brush: js notranslate">console.log(str.slice(-11, 16)) // retorna "á sob"</pre>

<p>O exemplo abaixo percorre o índice no sentido horário até chegar ao índice 10 da string, que será o início. Logo após, percorre o índice da string no sentido anti-horário até chegar ao índice 7 da string, que será o fim.</p>

<pre class="brush: js notranslate">console.log(str.slice(10, -7)) // retorna "tá so"</pre>

<p>O exemplo abaixo percorre o índice no sentido anti-horário até chegar ao índice 5 da string, que será o início. Logo após, percorre o índice da string novamente no sentido anti-horário até chegar ao índice 1 da string, que será o fim.</p>

<pre class="brush: js notranslate">console.log(str.slice(-5, -1)) // retorna "e nó"</pre>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>ECMAScript 3rd Edition.</td>
   <td>Standard</td>
   <td>Initial definition. Implemented in JavaScript 1.2.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-15.5.4.13', 'String.prototype.slice')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-string.prototype.slice', 'String.prototype.slice')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>

<div>{{CompatibilityTable}}</div>

<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>Basic support</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>Basic support</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.substring()")}}</li>
 <li>{{jsxref("Array.prototype.slice()")}}</li>
</ul>