> 웹 프론트엔드 > JS 튜토리얼 > 숫자가 포함된 문자열로 배열을 자연 순서로 정렬하는 방법은 무엇입니까?

숫자가 포함된 문자열로 배열을 자연 순서로 정렬하는 방법은 무엇입니까?

Barbara Streisand
풀어 주다: 2024-11-17 19:18:01
원래의
526명이 탐색했습니다.

How to Sort Arrays with Strings Containing Numbers in Natural Order?

자연 배열 요소 정렬: 숫자와 문자열

이 문서에서는 문자열과 숫자를 결합하는 요소가 포함된 배열을 정렬하는 작업에 대해 자세히 설명합니다. 정렬 과정에서 문자열 내의 숫자 순서를 고려해야 하는 자연 순서입니다.

문제

다음과 같은 배열을 고려하세요.

["IL0 Foo", "PI0 Bar", "IL10 Baz", "IL3 Bob says hello"]
로그인 후 복사

기존 정렬 기능을 사용하여 이 배열을 정렬하려고 하면 순서가 잘못될 수 있습니다.

["IL0 Foo", "IL10 Baz", "IL3 Bob says hello", "PI0 Bar"]
로그인 후 복사

해결책: 자연 정렬

자연스러운 정렬을 달성하기 위해 다음 JavaScript 함수를 활용할 수 있습니다.

function naturalCompare(a, b) {
    var ax = [], bx = [];

    a.replace(/(\d+)|(\D+)/g, function(_, , ) { ax.push([ || Infinity,  || ""]) });
    b.replace(/(\d+)|(\D+)/g, function(_, , ) { bx.push([ || Infinity,  || ""]) });
    
    while(ax.length && bx.length) {
        var an = ax.shift();
        var bn = bx.shift();
        var nn = (an[0] - bn[0]) || an[1].localeCompare(bn[1]);
        if(nn) return nn;
    }

    return ax.length - bx.length;
}
로그인 후 복사

이 함수는 입력 문자열을 숫자 값과 숫자가 아닌 값의 배열로 토큰화합니다. 그런 다음 숫자 값은 정수로, 숫자가 아닌 값은 문자열로 고려하여 배열을 사전순으로 비교합니다.

이 함수를 주어진 배열에 적용 원하는 자연 정렬 순서가 생성됩니다.

test = [
    "img12.png",
    "img10.png",
    "img2.png",
    "img1.png",
    "img101.png",
    "img101a.png",
    "abc10.jpg",
    "abc10",
    "abc2.jpg",
    "20.jpg",
    "20",
    "abc",
    "abc2",
    ""
];

test.sort(naturalCompare)
document.write("<pre class="brush:php;toolbar:false">" + JSON.stringify(test,0,3));
로그인 후 복사

이렇게 하면 다음과 같은 정렬된 배열이 생성됩니다.

[
  "",
  "abc",
  "abc2",
  "abc10",
  "abc10.jpg",
  "20",
  "20.jpg",
  "img1.png",
  "img2.png",
  "img10.png",
  "img12.png",
  "img101.png",
  "img101a.png"
]
로그인 후 복사

위 내용은 숫자가 포함된 문자열로 배열을 자연 순서로 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿