หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

แพ็คเกจนี้เลิกใช้แล้ว

คู่มือการโยกย้าย

แพ็คเกจนี้เบี่ยงเบนไปจากข้อมูลจำเพาะของ Intl.RelativeTimeFormat ค่อนข้างหนัก ดังนั้นเราจึงเลิกใช้แพ็คเกจนี้และเพิ่ม `@@formatjs/intl-relativetimeformat เป็น polyfill ที่สอดคล้องกับสเป็ค

  1. ทุก units (เช่น day-short ) ควรอพยพในทำนองเดียวกันกับ: 
 new IntlRelativeFormat ( 'en' , { units : 'second-short' } ) . format (
  Date . now ( ) - 1000
) ;
// will be
new Intl . RelativeTimeFormat ( 'en' , { style : 'short' } ) . format ( - 1 , 'second' ) ;

new IntlRelativeFormat ( 'en' , { units : 'day-narrow' } ) . format (
  Date . now ( ) - 48 * 3600 * 1000
) ;
// will be
new Intl . RelativeTimeFormat ( 'en' , { style : 'narrow' } ) . format ( - 2 , 'day' ) ;
  1. style: numeric จะกลายเป็น numeric: always ต่อสเป็ค (ซึ่งเป็นค่าเริ่มต้น) 
 new IntlRelativeFormat ( 'en' , {
  units : 'second-short' ,
  style : 'numeric'
} ) . format ( Date . now ( ) - 1000 ) ;
// will be
new Intl . RelativeTimeFormat ( 'en' , { style : 'short' } ) . format ( - 1 , 'second' ) ; 
 new IntlRelativeFormat ( 'en' , { units : 'day-narrow' , style : 'numeric' } ) . format (
  Date . now ( ) - 48 * 3600 * 1000
) ;
// will be
new Intl . RelativeTimeFormat ( 'en' , { style : 'narrow' } ) . format ( - 2 , 'day' ) ;
  1. style: 'best fit' นั้นค่อนข้างยุ่งยาก แต่เราได้เปิดตัว @formatjs/intl-utils เพื่อบรรเทาการเปลี่ยนแปลง: 
 new IntlRelativeFormat ( 'en' , { style : 'best fit' } ) . format ( Date . now ( ) - 1000 ) ;
// will be
import { selectUnit } from '@formatjs/intl-utils' ;
const diff = selectUnit ( Date . now ( ) - 1000 ) ;
new Intl . RelativeTimeFormat ( 'en' , { numeric : 'auto' } ) . format (
  diff . value ,
  diff . unit
) ; 
 new IntlRelativeFormat ( 'en' , { style : 'best fit' } ) . format (
  Date . now ( ) - 48 * 3600 * 1000
) ;
// will be
import { selectUnit } from '@formatjs/intl-utils' ;
const diff = selectUnit ( Date . now ( ) - 48 * 3600 * 1000 ) ;
new Intl . RelativeTimeFormat ( 'en' , { numeric : 'auto' } ) . format (
  diff . value ,
  diff . unit
) ;
  1. หากคุณใช้ options.now ใน format คุณสามารถใช้ formatjs/intl-utils เพื่อเปลี่ยนได้เช่นกัน 
 new IntlRelativeFormat ( 'en' , { style : 'best fit' } ) . format ( Date . now ( ) - 1000 , {
  now : Date . now ( ) + 1000
} ) ;
// will be
import { selectUnit } from '@formatjs/intl-utils' ;
const diff = selectUnit ( Date . now ( ) - 1000 , Date . now ( ) + 1000 ) ;
new Intl . RelativeTimeFormat ( 'en' , { numeric : 'auto' } ) . format (
  diff . value ,
  diff . unit
) ; 
 new IntlRelativeFormat ( 'en' , { style : 'best fit' } ) . format (
  Date . now ( ) - 48 * 3600 * 1000 ,
  { now : Date . now ( ) + 1000 }
) ;
// will be
import { selectUnit } from '@formatjs/intl-utils' ;
const diff = selectUnit ( Date . now ( ) - 48 * 3600 * 1000 , Date . now ( ) + 1000 ) ;
new Intl . RelativeTimeFormat ( 'en' , { numeric : 'auto' } ) . format (
  diff . value ,
  diff . unit
) ;

intl สัมพัทธ์

รูปแบบ JavaScript วันที่สตริงเวลาสัมพัทธ์ (เช่น "3 ชั่วโมงที่ผ่านมา")

ภาพรวม

เป้าหมาย

แพ็คเกจนี้มีจุดมุ่งหมายเพื่อให้วิธีการจัดรูปแบบการเปลี่ยนแปลงที่แตกต่างกันของเวลาสัมพัทธ์ คุณสามารถใช้แพ็คเกจนี้ในเบราว์เซอร์และบนเซิร์ฟเวอร์ผ่าน Node.js

การใช้งานนี้คล้ายกับ Moment.js ในแนวคิดแม้ว่าจะมีเพียงคุณสมบัติการจัดรูปแบบตามข้อมูล Locale Unicode CLDR ซึ่งเป็นมาตรฐานอุตสาหกรรมที่รองรับมากกว่า 200 ภาษา

มันทำงานอย่างไร 

 var rf = new IntlRelativeFormat ( locales , [ options ] ) ;

locales สามารถเป็นแท็กภาษาเดียวเช่น "en-US" หรืออาร์เรย์ของพวกเขาซึ่งจะใช้การจับคู่แรก options มีวิธีในการควบคุมผลลัพธ์ของสตริงเวลาสัมพัทธ์ที่จัดรูปแบบ 

 var output = rf . format ( someDate , [ options ] ) ;

ตัวอย่างการใช้งานทั่วไป

วิธีที่พบบ่อยที่สุดในการใช้ไลบรารีนี้คือการสร้างอินสแตนซ์ IntlRelativeFormat และนำกลับมาใช้ใหม่หลายครั้งเพื่อจัดรูปแบบค่าวันที่ที่แตกต่างกัน เช่น: 

 var rf = new IntlRelativeFormat ( 'en-US' ) ;

var posts = [
  {
    id : 1 ,
    title : 'Some Blog Post' ,
    date : new Date ( 1426271670524 )
  } ,
  {
    id : 2 ,
    title : 'Another Blog Post' ,
    date : new Date ( 1426278870524 )
  }
] ;

posts . forEach ( function ( post ) {
  console . log ( rf . format ( post . date ) ) ;
} ) ;
// => "3 hours ago"
// => "1 hour ago"

คุณสมบัติ

  • ตัวเลือกสไตล์สำหรับ "best fit" ("เมื่อวาน") และ "numeric" ("1 วันที่ผ่านมา") เอาต์พุตตามเกณฑ์

  • ตัวเลือกหน่วยสำหรับการแสดงผลเสมอในหน่วยเฉพาะ เช่น "30 วันที่ผ่านมา" แทนที่จะเป็น "1 เดือนที่ผ่านมา"

  • ความสามารถในการระบุค่า "ตอนนี้" ซึ่งการคำนวณเวลาสัมพัทธ์ช่วยให้ format()

  • รูปแบบเอาต์พุตในสตริงเวลาสัมพัทธ์โดยใช้ `intl.relativetimeformat

  • ปรับให้เหมาะสมสำหรับการโทรซ้ำไปยังวิธีการของ IntlRelativeFormat format()

การใช้งาน

การพึ่งพา Intl

แพ็คเกจนี้สันนิษฐานความสามารถต่อไปนี้จาก Intl :

  1. Intl.PluralRules
  2. Intl.RelativeTimeFormat

หากสภาพแวดล้อมของคุณไม่สนับสนุนสิ่งเหล่านั้นอย่าลังเลที่จะคว้า polyfills:

  1. https://www.npmjs.com/package/intl-pluralrules
  2. https://www.npmjs.com/package/@formatjs/intl-relativetimeformat

กำลังโหลด intlrelativeFormat ใน node.js

ติดตั้งแพ็คเกจและ Polyfill: 

npm install intl-relativeformat --save

เพียงแค่ require() แพ็คเกจนี้: 

 var IntlRelativeFormat = require ( 'intl-relativeformat' ) ;
var rf = new IntlRelativeFormat ( 'en' ) ;
var output = rf . format ( dateValue ) ;

Bundling IntlrelativeFormat กับ Browserify/Webpack/Rollup

ติดตั้งแพ็คเกจ: 

npm install intl-relativeformat --save

เพียงแค่ require() แพ็คเกจนี้และสถานที่เฉพาะที่คุณต้องการสนับสนุนในชุดข้อมูล: 

 var IntlRelativeFormat = require ( 'intl-relativeformat' ) ;

หมายเหตุ: ใน node.js ข้อมูลสำหรับ 200+ ภาษาทั้งหมดจะถูกโหลดพร้อมกับห้องสมุด แต่เมื่อรวมเข้ากับเบราว์เซอร์/เว็บแพ็คข้อมูลจะถูกละเว้นโดยเจตนา (ดู package.json สำหรับรายละเอียดเพิ่มเติม) เพื่อหลีกเลี่ยงการระเบิดขนาดของมัดด้วยข้อมูลที่คุณอาจไม่ต้องการ

API สาธารณะ

IntlRelativeFormat Constructor

ในการจัดรูปแบบวันที่ถึงเวลาสัมพัทธ์ให้ใช้ตัวสร้าง IntlRelativeFormat ตัวสร้างใช้สองพารามิเตอร์:

  • สถานที่ตั้ง - {String | String []} - สตริงที่มีแท็กภาษา BCP 47 หรืออาร์เรย์ของสตริงดังกล่าว หากคุณไม่ได้ให้สถานที่ตั้งค่าเริ่มต้นจะถูกใช้ เมื่อมีการตรวจสอบอาร์เรย์ของสถานที่แต่ละรายการและสถานที่บรรพบุรุษของบรรพบุรุษและรายการแรกที่มีข้อมูลในสถานที่ลงทะเบียนจะถูกส่งกลับ ดู: ความละเอียดของสถานที่สำหรับรายละเอียดเพิ่มเติม

  • [ตัวเลือก] - {Object} - วัตถุเสริมที่มีตัวเลือกที่ผู้ใช้กำหนดสำหรับสไตล์รูปแบบ ดู: ตัวเลือกที่กำหนดเองสำหรับรายละเอียดเพิ่มเติม

หมายเหตุ: อินสแตนซ์ rf ควรเพียงพอสำหรับแอปพลิเคชันทั้งหมดของคุณเว้นแต่คุณต้องการใช้ตัวเลือกที่กำหนดเอง

ความละเอียดของสถานที่

IntlRelativeFormat ใช้กระบวนการแก้ปัญหาในสถานที่คล้ายกับของ APIs Intl ในตัวเพื่อกำหนดว่าข้อมูลโลคาลที่จะใช้ตามค่า locales ที่ส่งผ่านไปยังคอนสตรัคเตอร์ ผลลัพธ์ของกระบวนการความละเอียดนี้สามารถกำหนดได้โดยเรียกใช้วิธีการ resolvedOptions() ต้นแบบ

ต่อไปนี้เป็นขั้นตอนที่เป็นนามธรรม IntlRelativeFormat ผ่านเพื่อแก้ไขค่าโลคาล:

  • หากไม่มีการโหลดข้อมูลสถานที่เพิ่มเติมสถานที่จะได้รับการแก้ไขเป็น "en" เสมอ

  • หากข้อมูลในสถานที่หายไปสำหรับสถานที่ใบไม้เช่น "fr-FR" แต่ มี ข้อมูลสำหรับหนึ่งในบรรพบุรุษของมัน "fr" ในกรณีนี้บรรพบุรุษของมันจะถูกนำมาใช้

  • หากมีข้อมูลสำหรับสถานที่ที่ระบุสถานที่นั้นจะได้รับการแก้ไข เช่น, 

     var rf = new IntlRelativeFormat ( 'en-US' ) ;
assert ( rf . resolvedOptions ( ) . locale === 'en-US' ) ; // true

  • สถานที่ที่ได้รับการแก้ไขจะถูกทำให้เป็นมาตรฐาน เช่น "en-us" จะแก้ไข: "en-US"

หมายเหตุ: เมื่อมีการจัดเตรียมอาร์เรย์สำหรับ locales ขั้นตอนข้างต้นจะเกิดขึ้นสำหรับแต่ละรายการในอาร์เรย์นั้นจนกว่าจะพบการแข่งขัน

ตัวเลือกที่กำหนดเอง

options อาร์กิวเมนต์ที่สองเป็นตัวเลือกให้วิธีการปรับแต่งวิธีการจัดรูปแบบเวลาสัมพัทธ์

หน่วย

โดยค่าเริ่มต้นเวลาสัมพัทธ์จะถูกคำนวณไปยังหน่วยที่เหมาะสมที่สุด แต่คุณสามารถเรียกมันให้ชัดเจนว่าจะบังคับให้ units ที่จะแสดงใน " "minute-narrow" "second" , " "second-short" "second-narrow" , "minute" "day" "minute-short" "day-short" "hour" "month" "day-narrow" "hour-short" , "month-short" "hour-narrow" "month-narrow" "year" , "year-short" หรือ "year-narrow" : 

 var rf = new IntlRelativeFormat ( 'en' , {
  units : 'day'
} ) ;
var output = rf . format ( dateValue ) ;

เป็นผลให้ผลลัพธ์จะเป็น "70 วันที่ผ่านมา" แทนที่จะเป็น "2 เดือนที่ผ่านมา"

สไตล์

โดยค่าเริ่มต้นเวลาสัมพัทธ์จะถูกคำนวณเป็น "best fit" ซึ่งหมายความว่าแทนที่จะเป็น "1 วันที่ผ่านมา" มันจะแสดง "เมื่อวาน" หรือ "ใน 1 ปี" จะเป็น "ปีหน้า" ฯลฯ แต่คุณสามารถบังคับให้ใช้ทางเลือก "ตัวเลข" เสมอ: 

 var rf = new IntlRelativeFormat ( 'en' , {
  style : 'numeric'
} ) ;
var output = rf . format ( dateValue ) ;

เป็นผลให้ผลลัพธ์จะเป็น "1 วันที่ผ่านมา" แทนที่จะเป็น "เมื่อวาน"

วิธี resolvedOptions()

วิธีนี้ส่งคืนวัตถุด้วยค่าตัวเลือกที่ได้รับการแก้ไขในระหว่างการสร้างอินสแตนซ์ ปัจจุบันมีเพียงคุณสมบัติ locale เท่านั้น นี่คือตัวอย่าง: 

 var rf = new IntlRelativeFormat ( 'en-us' ) ;
console . log ( rf . resolvedOptions ( ) . locale ) ; // => "en-US"

ขอให้สังเกตว่าสถานที่ที่ระบุเป็นค่าตัวพิมพ์เล็กทั้งหมด: "en-us" แต่มันได้รับการแก้ไขและทำให้เป็นมาตรฐานเป็น: "en-US"

format(date, [options]) วิธีการ

วิธีการจัดรูปแบบ ( ซึ่งใช้วันที่ javaScript หรือการประทับเวลา ) และอาร์กิวเมนต์ options ทางเลือกจะเปรียบเทียบ date กับ "ตอนนี้" (หรือ options.now ) และส่งคืนสตริงที่จัดรูปแบบ เช่น "3 ชั่วโมงที่ผ่านมา" ในสถานที่ที่สอดคล้องกันผ่านเข้าสู่ตัวสร้าง 

 var output = rf . format ( new Date ( ) ) ;
console . log ( output ) ; // => "now"

หากคุณต้องการระบุค่า "ตอนนี้" มันสามารถให้บริการผ่าน options.now และจะใช้แทนการสอบถาม Date.now() เพื่อรับค่าปัจจุบัน "ตอนนี้"

ใบอนุญาต

ซอฟต์แวร์นี้ใช้งานได้ฟรีภายใต้ Yahoo! ใบอนุญาต BSD Inc. ดูไฟล์ใบอนุญาตสำหรับข้อความใบอนุญาตและข้อมูลลิขสิทธิ์

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด