Difference between toLocaleLowerCase() and toLowerCase()

This question already has an answer here:

  • In what JS engines, specifically, are toLowerCase & toUpperCase locale-sensitive? 2 answers

  • 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.

  • 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.

  • innerText is non-standard, and will not work across all browsers. Use textContent instead, and only add innerText to support old versions of IE.

  • 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>
    链接地址: http://www.djcxy.com/p/21258.html

    上一篇: 一个H3的内容作为H3的ID

    下一篇: toLocaleLowerCase()和toLowerCase()之间的区别