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?

Solution

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>

Comments

[Zameer Ansari]

And what is the bug in the code I'm trying to run

[Alexander O'Mara]

@student One second, I'll add that also.

[Everts]

With English, the two methods give the same output. I'd guess it is relevant with languages like French where cap letters do not take accent in Switzerland but does in France by convention.

[Alexander O'Mara]

@student Added a working snippet with explanation.

[Zameer Ansari]

@AlexanderO'Mara Does it also apply to toLocaleUpperCase and toUpperCase?

[Legends]

@AlexanderO'Mara You should have added a turkish word as an example to demo the difference ;-)

[Mingwei Samuel]

innerText is standardized as of 2016