Difference between toLocaleLowerCase() and toLowerCase()

Question

I was trying to fiddle with toLocaleLowerCase() and toLowerCase() methods.

function ByLocale() {
  document.getElementById("demo").innerText.toLocaleLowerCase();
}

function ByLower() {
  document.getElementById("demo").innerText.toLowerCase();
}

<p>Click the button to convert the string "HELLO World!" to lowercase letters.</p>

  <button onclick="ByLocale();">By Locale LowerCase</button>
  <button onclick="ByLower();">By LowerCase</button>

<p id="demo">HELLO World!</p>

My questions are:

• What is Locale, because both the functions seems to return similar output?
• What is the difference between these two methods?
• Why is the fiddle code not getting executed?

Answer 1

Unlike toLowerCase, toLocaleLowerCase takes localization into account. In most cases, with most languages, they will produce similar output, however certain languages will behave differently.

Check out the description on MDN:

The toLocaleLowerCase() method returns the value of the string converted to lower case according to any locale-specific case mappings. toLocaleLowerCase() does not affect the value of the string itself. In most cases, this will produce the same result as toLowerCase(), but for some locales, such as Turkish, whose case mappings do not follow the default case mappings in Unicode, there may be a different result.

For completeness, toUpperCase and toLocaleUpperCase behave likewise, except with upper-casing.

---

Now for the issue with your snippet not doing anything. There are actually 2 issues.

1. These methods return new strings and don't modify the original (JavaScript strings are immutable). You will need to re-assign the value back to the element.

2. innerText is non-standard, and will not work across all browsers. Use textContent instead, and only add innerText to support old versions of IE. UPDATE: innerText is now standardized, though it was not at the time this answer was posted.

Working Snippet:

function ByLocale() {
  var el = document.getElementById("demo");
  el.textContent = el.textContent.toLocaleLowerCase();
}

function ByLower() {
  var el = document.getElementById("demo");
  el.textContent = el.textContent.toLowerCase();
}

<p>Click the button to convert the string "HELLO World!" to lowercase letters.</p>

  <button onclick="ByLocale();">By Locale LowerCase</button>
  <button onclick="ByLower();">By LowerCase</button>

<p id="demo">HELLO World!</p>