ดาวน์โหลด intl messageformat - intl messageformat Source Source Download

intl messageformat

ข้อมูลเว็บไซต์

v3.0.0

ดาวน์โหลด

repo นี้ถูกอพยพไปยัง monorepo

Intl MessageFormat

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

ภาพรวม

เป้าหมาย

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

การดำเนินการนี้ขึ้นอยู่กับข้อเสนอของฟาง แต่มีบางสถานที่ที่มีการใช้งานนี้แตกต่างกันไป

หมายเหตุ: IntlMessageFormat API นี้อาจเปลี่ยนไปเพื่อซิงค์กับ ECMA-402 แต่แพ็คเกจนี้จะเป็นไปตาม Semver

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

ข้อความจะถูกระบุไว้ในตัวสร้างเป็นข้อความ String หรือวัตถุ AST ที่เตรียมไว้ล่วงหน้า

 var msg = new IntlMessageFormat ( message , locales , [ formats ] ) ;

message สตริงจะถูกแยกวิเคราะห์จากนั้นเก็บไว้ภายในในรูปแบบที่รวบรวมซึ่งได้รับการปรับให้เหมาะสมสำหรับวิธี format() เพื่อสร้างสตริงที่จัดรูปแบบเพื่อแสดงให้กับผู้ใช้

 var output = msg . format ( values ) ;

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

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

 var MESSAGES = {
    'en-US' : {
        NUM_PHOTOS : 'You have {numPhotos, plural, ' +
            '=0 {no photos.}' +
            '=1 {one photo.}' +
            'other {# photos.}}'
    } ,

    'es-MX' : {
        NUM_PHOTOS : 'Usted {numPhotos, plural, ' +
            '=0 {no tiene fotos.}' +
            '=1 {tiene una foto.}' +
            'other {tiene # fotos.}}'
    }
} ;

var output ;

var enNumPhotos = new IntlMessageFormat ( MESSAGES [ 'en-US' ] . NUM_PHOTOS , 'en-US' ) ;
output = enNumPhotos . format ( { numPhotos : 1000 } ) ;
console . log ( output ) ; // => "You have 1,000 photos."

var esNumPhotos = new IntlMessageFormat ( MESSAGES [ 'es-MX' ] . NUM_PHOTOS , 'es-MX' ) ;
output = esNumPhotos . format ( { numPhotos : 1000 } ) ;
console . log ( output ) ; // => "Usted tiene 1,000 fotos."

ไวยากรณ์ข้อความ

ไวยากรณ์ข้อความที่แพ็คเกจนี้ใช้ไม่ได้เป็นกรรมสิทธิ์ในความเป็นจริงมันเป็นไวยากรณ์ข้อความมาตรฐานทั่วไปที่ใช้งานได้กับภาษาการเขียนโปรแกรมและอีกหนึ่งที่นักแปลมืออาชีพคุ้นเคย แพ็คเกจนี้ใช้ ไวยากรณ์ข้อความ ICU และใช้งานได้สำหรับภาษา CLDR ทั้งหมดที่มีกฎการพหุนาม

คุณสมบัติ

ใช้มาตรฐานอุตสาหกรรม: ไวยากรณ์ข้อความ ICU และข้อมูลตำแหน่ง CLDR
รองรับ พหูพจน์ เลือก และอาร์กิวเมนต์ข้อความ เลือก
รูปแบบตัวเลขและวันที่/เวลาในข้อความโดยใช้ Intl.NumberFormat และ Intl.DateTimeFormat ตามลำดับ
ได้รับการปรับให้เหมาะสมสำหรับการโทรซ้ำไปยังวิธีการของอินสแตนซ์ของ IntlMessageFormat format()
รองรับการกำหนดรูปแบบ/ตัวเลือกรูปแบบที่กำหนดเอง
รองรับลำดับการหลบหนีสำหรับข้อความไวยากรณ์ข้อความเช่น: "\{foo\}" จะส่งออก: "{foo}" ในเอาต์พุตที่จัดรูปแบบแทนการตีความว่าเป็นอาร์กิวเมนต์ foo

การใช้งาน

การพึ่งพา `Intl` ที่ทันสมัย

แพ็คเกจนี้สันนิษฐานว่าวัตถุ Intl Global มีอยู่ในรันไทม์ Intl มีอยู่ในเบราว์เซอร์ที่ทันสมัยทั้งหมด (IE11+) และโหนด (พร้อม ICU เต็มรูปแบบ) วิธี Intl ที่เราพึ่งพาคือ:

Intl.NumberFormat สำหรับการจัดรูปแบบตัวเลข (สามารถทำ polyfilled ได้โดยใช้ intl.js)
Intl.DateTimeFormat สำหรับการจัดรูปแบบเวลาวันที่ (สามารถ polyfilled ได้โดยใช้ intl.js)
Intl.PluralRules สำหรับการจัดรูปแบบพหูพจน์/ลำดับ (สามารถ polyfilled ได้โดยใช้ intl-pluralrules)

การโหลด Intl MessageFormat ในเบราว์เซอร์

 < script src =" intl-messageformat/intl-messageformat.min.js " > </ script >

การโหลด intl messageFormat ใน node.js

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

 var IntlMessageFormat = require ( 'intl-messageformat' ) ;

หมายเหตุ: โหนดของคุณต้องรวมห้องไอซียูเต็มรูปแบบ

API สาธารณะ

`IntlMessageFormat` Constructor

ในการสร้างข้อความเพื่อจัดรูปแบบให้ใช้ตัวสร้าง IntlMessageFormat ตัวสร้างใช้สามพารามิเตอร์:

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

 var msg = new IntlMessageFormat ( 'My name is {name}.' , 'en-US' ) ;

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

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

วิธี `resolvedOptions()`

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

 var msg = new IntlMessageFormat ( '' , 'en-us' ) ;
console . log ( msg . resolvedOptions ( ) . locale ) ; // => "en-US"

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

`format(values)` วิธีการ

เมื่อข้อความถูกสร้างขึ้นการจัดรูปแบบข้อความจะทำโดยเรียกวิธี format() บนอินสแตนซ์และส่งผ่านการรวบรวม values :

 var output = msg . format ( { name : "Eric" } ) ;
console . log ( output ) ; // => "My name is Eric."

หมายเหตุ: ต้อง จัดหาค่าสำหรับทุกอาร์กิวเมนต์ในรูปแบบข้อความที่อินสแตนซ์ถูกสร้างขึ้นด้วย

รูปแบบที่ผู้ใช้กำหนด

กำหนดรูปแบบรูปแบบที่กำหนดเองมีประโยชน์คุณต้องจัดหาชุดของตัวเลือกให้กับฟอร์แมตพื้นฐาน เช่นเอาท์พุทตัวเลขเป็น USD:

 var msg = new IntlMessageFormat ( 'The price is: {price, number, USD}' , 'en-US' , {
    number : {
        USD : {
            style   : 'currency' ,
            currency : 'USD'
        }
    }
} ) ;

var output = msg . format ( { price : 100 } ) ;
console . log ( output ) ; // => "The price is: $100.00"

ในตัวอย่างนี้เรากำลังกำหนดรูปแบบรูปแบบหมายเลข USD ซึ่งส่งผ่านไปยังอินสแตนซ์ Intl.NumberFormat พื้นฐานเป็นตัวเลือก

ตัวอย่าง

ฉลากพหูพจน์

ตัวอย่างนี้แสดงวิธีใช้ไวยากรณ์ข้อความ ICU เพื่อกำหนดข้อความที่มีฉลากพหูพจน์ เช่น "You have 10 photos" :

 You have {numPhotos, plural,
    =0 {no photos.}
    =1 {one photo.}
    other {# photos.}
}

 var MESSAGES = {
    photos : '...' , // String from code block above.
    ...
} ;

var msg = new IntlMessageFormat ( MESSAGES . photos , 'en-US' ) ;

console . log ( msg . format ( { numPhotos : 0 } ) ) ;    // => "You have no photos."
console . log ( msg . format ( { numPhotos : 1 } ) ) ;    // => "You have one photo."
console . log ( msg . format ( { numPhotos : 1000 } ) ) ; // => "You have 1,000 photos."