javascripthtmlstringlocalizationlocale

Difference between toLocaleLowerCase() and toLowerCase()

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:

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:

    Notice the different number of dots above the character that looks like an i.

    const demo = document.getElementById('demo');
const str = demo.textContent;

function toLowerCase() {
  demo.textContent = str.toLowerCase();
}

function toLocaleLowerCase() {
  demo.textContent = str.toLocaleLowerCase("tr");
}

function toLocaleLowerCaseDe() {
  demo.textContent = str.toLocaleLowerCase('de-DE');
}

function toUpperCase() {
  demo.textContent = str.toUpperCase();
}

function toLocaleUpperCase() {
  demo.textContent = str.toLocaleUpperCase("tr");
}

function toLocaleUpperCaseDe() {
  demo.textContent = str.toLocaleUpperCase('de-DE');
}

function reset() {
  demo.textContent = str;
}
    <p>Click the buttons to apply each function to the string below.</p>

<button onclick="toLowerCase();">toLowerCase</button>
<button onclick="toLocaleLowerCase();">toLocaleLowerCase("tr")</button>
<button onclick="toLocaleLowerCaseDe();">toLocaleLowerCase("de-DE")</button>
<br><br>
<button onclick="toUpperCase();">toUpperCase</button>
<button onclick="toLocaleUpperCase();">toLocaleUpperCase("tr")</button>
<button onclick="toLocaleUpperCaseDe();">toLocaleUpperCase("de-DE")</button>
<br><br>
<button onclick="reset();">reset</button>

<p id="demo">WELCOME TO THE WORLD FÊTE! In HAUPTSTRAßE, İstanbul.</p>