javascript - string.prototype.localeCompare()，脚本修改

我有以下代码：

<!DOCTYPE HTML>
<html>
    <head>
        <title>
            Sort a list alphabetically
        </title>

        <script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
        </script>
    </head>

    <body>
        <button>
                click here
            </button>

        <ul>
            <li>Geeks</li>
            <li>Sosna</li>
            <li>Zebra</li>
            <li>GeeksForGeeks</li>
          <li><h1>G</h1></li>
            <li><h1>F</h1></li>
            <li>Arbuz</li>
            <li><h1>A</h1></li>
          <li>Łódź</li>
            <li><h1>Ł</h1></li>
          <li>ósmy</li>
            <li><h1>Ó</h1></li>
          <li>święty</li>
            <li><h1>Ś</h1></li>
          <li>ärgern</li>
            <li><h1>Ä</h1></li>
          <li>Österreich</li>
            <li><h1>Ö</h1></li>
          <li>Überraschung</li>
            <li><h1>Ü</h1></li>
        </ul>

        <script>
            function Ascending_sort(a, b) {
                return ($(b).text().toUpperCase()) <
                    ($(a).text().toUpperCase()) ? 1 : -1;
            }
            $('button').on('click', function() {
                $("ul li").sort(Ascending_sort).appendTo('ul');
            });
        </script>
    </body>
</html>

Codepen：https://codepen.io/rudolph-reti/pen/dyPzXER

我刚刚开始学习JavaScript。我不能独自处理。我希望使用localeCompare()函数对列表进行排序。有人可以帮我把它放进脚本吗？

最佳答案

.localeCompare()已经返回了.sort()期望的正确Number值，因此您不必担心自己这样做

从文档中，返回值.localeCompare()：

如果参考字符串位于比较字符串之前，则为负数；否则为负。如果参考字符串出现在比较字符串之后，则为正；如果它们相等则为0。

const alphabet = "abcdefghijklmnopqrstuvwxyzäöüß";

function letterSort(a, b) {
  b = $(b).text().trim().toLowerCase();
  a = $(a).text().trim().toLowerCase();

  // Find the first position were the strings do not match
  let position = 0;

  while(a[position] === b[position]) {
      // If both are the same don't swap
      if(!a[position] && !b[position]) return 0;

      // Otherwise the shorter one goes first
      if(!a[position]) return 1;
      if(!b[position]) return -1;

      position++;
  }

  // Then sort by the characters position
  return alphabet.indexOf(a[position]) - alphabet.indexOf(b[position]);
}

$('button').on('click', function() {
  $("ul li").sort(letterSort).appendTo('ul');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <button>Click here</button>

  <ul>
    <li>Geeks</li>
    <li>Sosna</li>
    <li>Zebra</li>
    <li>GeeksForGeeks</li>
    <li>
      <h1>G</h1>
    </li>
    <li>
      <h1>F</h1>
    </li>
    <li>Arbuz</li>
    <li>
      <h1>A</h1>
    </li>
    <li>Łódź</li>
    <li>
      <h1>Ł</h1>
    </li>
    <li>ósmy</li>
    <li>
      <h1>Ó</h1>
    </li>
    <li>święty</li>
    <li>
      <h1>Ś</h1>
    </li>
    <li>ärgern</li>
    <li>
      <h1>Ä</h1>
    </li>
    <li>Österreich</li>
    <li>
      <h1>Ö</h1>
    </li>
    <li>Überraschung</li>
    <li>
      <h1>Ü</h1>
    </li>
  </ul>
</body>