String.prototype.trim()

  • Revision slug: Web/JavaScript/Reference/Global_Objects/String/Trim
  • Revision title: String.prototype.trim()
  • Revision id: 509865
  • Created:
  • Creator: fscholz
  • Is current revision? No
  • Comment cleanup

Revision Content

{{JSRef("Global_Objects", "String")}}

Summary

The trim() method removes whitespace from both ends of the string.

Syntax

str.trim()

Description

The trim method returns the string stripped of whitespace from both ends. trim does not affect the value of the string itself.

Examples

Example: Using trim

The following example displays the lowercase string "foo":

var orig = "   foo  ";

console.log( orig.trim() ); // "foo"

Polyfill

Running the following code before any other code will create String.trim if it's not natively available.

if (!String.prototype.trim) {
  String.prototype.trim = function () {
    return this.replace(/^\s+|\s+$/gm, '');
  };
}

Specifications

Specification Status Comment
{{SpecName('ES5.1', '#sec-15.5.4.20', 'String.prototype.trim')}} {{Spec2('ES5.1')}} Initial definition.
Implemented in JavaScript 1.8.1
{{SpecName('ES6', '#sec-string.prototype.trim', 'String.prototype.trim')}} {{Spec2('ES6')}}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("3.5") }} 9 10.5 5
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}

See also

  • {{jsxref("String.prototype.trimLeft()")}}
  • {{jsxref("String.prototype.trimRight()")}}

Revision Source

<div>
 <div>
  {{JSRef("Global_Objects", "String")}}</div>
</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p>The <code><strong>trim()</strong></code> method removes whitespace from both ends of the string.</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">
<code><em>str</em>.trim()</code></pre>
<h2 id="Description" name="Description">Description</h2>
<p>The <code>trim</code> method returns the string stripped of whitespace from both ends. <code>trim</code> does not affect the value of the string itself.</p>
<h2 id="Examples" name="Examples">Examples</h2>
<h3 id="Example:_Using_toLowerCase" name="Example:_Using_toLowerCase">Example: Using <code>trim</code></h3>
<p>The following example displays the lowercase string "foo":</p>
<pre class="brush: js">
var orig = "&nbsp;&nbsp;&nbsp;foo&nbsp;&nbsp;";

console.log( orig.trim() ); // "foo"</pre>
<h2 id="Compatibility" name="Compatibility">Polyfill</h2>
<p>Running the following code before any other code will create <code>String.trim</code> if it's not natively available.</p>
<pre class="brush: js">
if (!String.prototype.trim) {
  String.prototype.trim = function () {
    return this.replace(/^\s+|\s+$/gm, '');
  };
}</pre>
<h2>Specifications</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>{{SpecName('ES5.1', '#sec-15.5.4.20', 'String.prototype.trim')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td>Initial definition.<br />
    Implemented in JavaScript 1.8.1</td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-string.prototype.trim', 'String.prototype.trim')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</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>Basic support</td>
    <td>{{ CompatVersionUnknown() }}</td>
    <td>{{ CompatGeckoDesktop("3.5") }}</td>
    <td>9</td>
    <td>10.5</td>
    <td>5</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">See also</h2>
<ul>
 <li>{{jsxref("String.prototype.trimLeft()")}}</li>
 <li>{{jsxref("String.prototype.trimRight()")}}</li>
</ul>
Revert to this revision