typescript - Angular 4 OrderBy Pipe ไม่เรียงลำดับถ้าชื่อจบด้วยตัวเลข

ฉันต้องการใช้ pipe เพื่อจัดเรียงชื่อที่ลงท้ายด้วยตัวเลข

ฉันได้ใช้ท่อกำหนดเองและได้รับผลลัพธ์ตามที่คาดไว้

• $ผลไม้แอปเปิ้ล -สัญลักษณ์
• 1 ผลไม้แอปเปิ้ล - ตัวเลข
• ผลไม้แอปเปิ้ล -ตามลำดับตัวอักษร

แต่จะไม่จัดเรียงหากชื่อลงท้ายด้วยตัวเลข

ผลลัพธ์ตอนนี้:

• แอปเปิ้ล ผลไม้3
• แอปเปิ้ล ผลไม้01
• แอปเปิ้ล ผลไม้5
• แอปเปิ้ล ผลไม้02

เจสัน

[
{"name": "Apple fruit3"},
{"name": "$Apple fruit"},
{"name": "Apple fruit"},
{"name": "Apple fruit01"},
{"name": "Apple fruit5"},
{"name": "Apple fruit02"},
]

เอชทีเอ็มแอล

<div *ngFor='let list of names | appOrderBy : "name" '>
<div>{{list.name}}</div>
</div>

ท่อกำหนดลำดับแบบกำหนดเอง

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
     name: 'appOrderBy'
})
export class OrderBy implements PipeTransform {
transform(array: Array<string>, args: string): Array<string>{
array.sort((a: any, b: any) => {
  if (a[args] < b[args]) {
    return -1;
  } else if (a[args] > b[args]) {
    return 1;
  } else {
    return 0;
  }
});
return array;
}
}

คำตอบ #1

ใช้ Intl.Collator เป็นฟังก์ชันเปรียบเทียบของคุณสำหรับการจัดเรียงตัวเลขตามธรรมชาติ

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator

const array = [
  {name: "Apple fruit3"},
  {name: "$Apple fruit"},
  {name: "Apple fruit"},
  {name: "Apple fruit01"},
  {name: "Apple fruit5"},
  {name: "Apple fruit02"},
];

args= 'name';

var collator = new Intl.Collator(undefined, {numeric: true, sensitivity: 'base'});

array.sort((a, b) => collator.compare(a[args], b[args]));

console.log(array);

ฉันตั้งคำตอบนี้บนพื้นฐานของการค้นหา 'การเรียงลำดับตัวเลขธรรมชาติ' ใน Google ซึ่งส่งผลให้เจอโพสต์นี้

จาวาสคริปต์: การจัดเรียงแบบธรรมชาติของสตริงตัวอักษรและตัวเลข