toLocaleLowerCase() 和 toLowerCase() 的区别

Difference between toLocaleLowerCase() and toLowerCase()

我正在尝试 fiddle with toLocaleLowerCase() and toLowerCase() 方法。

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>

我的问题是:

toLowerCase不同,toLocaleLowerCase考虑了本地化。在大多数情况下,对于大多数语言,它们会产生相似的输出,但某些语言的行为会有所不同。

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.

为了完整起见,toUpperCasetoLocaleUpperCase 行为相似,除了大写。


现在解决您的代码段没有执行任何操作的问题。实际上有2个问题。

  1. 这些方法return 新字符串并且不修改原始字符串(JavaScript 字符串是不可变的)。您需要将值重新分配回元素。

  2. innerText 是非标准的,不能在所有浏览器上工作。使用 textContent 代替,只添加 innerText 以支持旧版本的 IE。 更新: innerText 现在已标准化,不过不是在发布此答案时。

工作代码段:

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>