时间戳

首页 > 解决方案 > string.prototype.localeCompare()，脚本修改

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()函数对列表进行排序。有人可以帮我把它写进剧本吗？

标签： javascriptjqueryfunctionsorting

解决方案

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

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

如果引用字符串出现在比较字符串之前，则为负数；如果引用字符串出现在比较字符串之后，则为正；如果它们相等，则为 0。

您的代码.localeCompare()如下：

function Ascending_sort(a, b) {
  b = $(b).text().trim().toUpperCase();
  a = $(a).text().trim().toUpperCase();

  return b.localeCompare(a);
}

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

在聊天中讨论之后，使用排序使使用字符串更有意义，并已添加到代码段中

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>

推荐阅读