привет~ Уважаемые наблюдатели и господа, всем привет~ В последнее время я пристрастился к изучению других языков и давно не писал статей. Скоро апрель, и если я не напишу, то боюсь совсем облениться. На этот раз я поделюсь с вамиtoLocaleStringМаленькая хитрость, если нужно инициализировать числа или даты, учтите, будетбыть ленивымУдивительный эффект!
Уведомление! Вообще говоря, есть требования к отображению чисел и дат, и стиль должен быть унифицирован. Но если это внутренний проект или разрешено pm, используйтеtoLocaleStringФорматирование чисел и дат вполне неплохое, в противном случае рекомендуется написать свое обычное или преобразование функций. Ведь каждыйAPIУ всех есть ограничения.
Эта статья относится к документации MDN и ежедневному использованию, если вы заинтересованы в этом.APIЯ уже довольно хорошо знаком с ним, пожалуйста, помогите мне увидеть, не пропустил ли я что-нибудь (смеется); студенты, которые не знают, могут просмотреть его, это должно быть вам полезно.
Обзор
toLocaleStringМетод используется для возврата строки после форматируемого объекта, формат строки отличается для разных языков. Возвращаемый язык и конкретная производительность могут быть определены путем передачи параметров. Это весьма полезно в некоторых сценариях. Синтаксис выглядит следующим образом:
object.toLocaleString([locales [, options]]);
localesПараметр используется для указания локали, используемой при форматировании объекта.По умолчанию используется язык текущей среды, который можно не указывать. Конкретное необязательное значение этого параметра может относиться кздесь, в общем использованииenилиzhМожет справиться с большинством ситуаций. Примеры следующие:
const date = new Date();
date.toLocaleString('zh'); // 2018/4/4 下午15:08:38
date.toLocaleString('en'); // 4/4/2018, 3:08:38 PM
Кстати, этот параметр не чувствителен к регистру и проверен в браузерах и Node.
optionsПараметр является элементом конфигурации стиля вывода, согласноobjectРазличные типы будут иметь разные параметры, и этот параметр будет подробно объяснен ниже. Но следует отметить, что еслиlocalesпараметры, тоoptionsПараметр не будет действовать, на самом деле приведенная выше грамматика действительно показала это.
Наконец, есть проблема совместимости, как показано на следующем рисунке:
Жаль, что совместимость чуть хуже при использовании параметров, но в целом оптимистично.
Number.prototype.toLocaleString
Представить первымtoLocaleStringИспользуйте для числовых типов. В интервью иногда спрашивают, как форматировать числа, чтобы каждая трехзначная запятая добавлялась к целой части.
const num = 2333333;
num.toLocaleString(); // 2,333,333
На самом деле никакой регулярности и не нужно~ После лица вопрошающего давайте посмотримtoLocaleStringв числовом типеoptionsПараметры имеют полезные свойства, облегчающие намбыть ленивымиспользовать. Обратите внимание, что эта статья не является переводным документом, поэтому будут представлены только некоторые часто используемые свойства.MDNсопутствующую документацию.
styleУказывает стиль, используемый при форматировании, значение по умолчанию —decimalТо есть чистые числа илиpercentПроцент отображается сcurrencyОтображение валюты. значениеcurrencyнеобходимо указать одновременноoptionsсерединаcurrencyатрибут, в противном случае будет сообщено об ошибке. Конкретные примеры следующие:
const num = 2333333;
num.toLocaleString('zh', { style: 'decimal' }); //2,333,333
num.toLocaleString('zh', { style: 'percent' }); //233,333,300%
num.toLocaleString('zh', { style: 'currency' }); //报错
Следующие два свойстваstyleустановить какcurrencyполезно, когда ониcurrencyиcurrencyDisplay, первый указывает соответствующую валюту, напримерUSD,EURиCNYПодождите, фактическое измерение также нечувствительно к регистру. Последний является стилем отображения символа валюты, значение по умолчанию равноsymbol, то есть соответствующие символы, такие какCNYэто ￥. Значение этого свойства также может бытьcodeиname, но он используется меньше, просто посмотрите на пример~ Подробности следующие:
const num = 2333333;
num.toLocaleString('zh', { style: 'currency', currency: 'CNY' }); //￥2,333,333.00
num.toLocaleString('zh', { style: 'currency', currency: 'cny', currencyDisplay: 'code' }); //CNY2,333,333.00
num.toLocaleString('zh', { style: 'currency', currency: 'cny', currencyDisplay: 'name' }); //2,333,333.00人民币
Наконец, есть два набора очень мощных атрибутов, которые могут быть очень удобны в некоторых сценариях. Первая группаminimumIntegerDigits,minimumFractionDigitsиmaximumFractionDigits, который используется для указания минимального количества целых цифр, а также минимального и максимального количества десятичных знаков. Если этого недостаточно, используйте 0 для восполнения. Проще говоря, автоматически заполнить 0! Конкретные примеры следующие:
let num = 2333.3;
num.toLocaleString('zh', { minimumIntegerDigits: 5 }); //02,333.3
//如果不想有分隔符，可以指定useGrouping为false
num.toLocaleString('zh', { minimumIntegerDigits: 5, useGrouping: false }); //02333.3
num.toLocaleString('zh', { minimumFractionDigits: 2, useGrouping: false }); //2333.30
num = 666.666
num.toLocaleString('zh', { maximumFractionDigits: 2, useGrouping: false }); //666.67
С тех пор не нужно беспокоиться о заполнении 0 и контроле количества цифр~
Другая группаminimumSignificantDigitsиmaximumSignificantDigits, который используется для управления количеством значащих цифр. Пока установлена эта группа свойств, первая группа свойств будет игнорироваться следующим образом:
const num = 1234.5;
num.toLocaleString('zh', { minimumSignificantDigits: 6, useGrouping: false }); //1234.50
num.toLocaleString('zh', { maximumSignificantDigits: 4, useGrouping: false }); //1235
Уведомление,maximumFractionDigitsиmaximumSignificantDigitsВсе они закруглены, поэтому будьте осторожны при их использовании. числовой типtoLocaleStringВведение окончено, давайте взглянем на тип датыtoLocaleStringизoptionsКакие полезные свойства есть.
Date.prototype.toLocaleString
В отличие от числовых типов, типы даты имеютlocalesВлияние на вывод очень велико (на самом деле большое влияние оказывает цифровой шрифт, но он, как правило, не используется), поэтому подходящую языковую среду следует выбирать в соответствии с реальной ситуацией. Как и в числовом типе, вводятся только общие свойства.Подробное описание свойств см.MDNдокументация.
hour12Указывает, использовать ли 12-часовой или 24-часовой формат, значение по умолчанию зависит отlocalesЗависит от. Примеры следующие:
const date = new Date();
date.toLocaleString('zh', { hour12: true }); //2018/4/4 下午6:57:36
date.toLocaleString('zh', { hour12: false }); //2018/4/4 18:57:36
После этого есть такие опции, как форматирование года, месяца, дня, часа, минуты, секунды, недели и т. д.MDNВ документе сказано, что свойства должны быть установлены в соответствии с определенной группой.В реальном использовании обнаруживается, что каждое свойство используется отдельно, не сообщая об ошибке, поэтому лучше понимать это, вводя его отдельно по значению свойства .
Всего существует 9 специфических атрибутов, которыеweekday,era,year,month,day,hour,minute,secondиtimeZoneName. Конкретный смысл можно понять за считанные секунды, глядя на слова, не объясняя слишком много. Однако помните об их необязательных значениях. сначала обсудитьweekdayиera, они могут принимать значениеnarrow,shortилиlong, вкратце, как коротко и как можно кратко, аббревиатуры и нормальное исполнение, конкретное исполнение таково:
const date = new Date();
date.toLocaleString('en', { weekday: 'narrow', era: 'narrow' }); //W A
date.toLocaleString('en', { weekday: 'short', era: 'short' }); //Wed AD
date.toLocaleString('en', { weekday: 'long', era: 'long' }); //Wednesday Anno Domini
с последующимtimeZoneNameсвойство, это свойство имеет толькоshortилиlongДва значения, которые ведут себя следующим образом:
const date = new Date();
date.toLocaleString('zh', { timeZoneName: 'short' }); //2018/4/5 GMT+8 下午7:18:26
date.toLocaleString('zh', { timeZoneName: 'long' }); //2018/4/5 中国标准时间 下午7:18:26
Остальные свойства могут принимать значенияnumericи2-digitКороче говоря, если он представлен только двумя цифрами, посмотрите на код, чтобы сказать:
const date = new Date();
date.toLocaleString('zh', { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', }); //2018/4/5 下午7:30:17
date.toLocaleString('zh', { year: '2-digit', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' }); //18/04/05 下午7:30:17
(как ни странно,hour,minuteиsecondТри атрибута, независимо от того, какое значение они имеют, ведут себя одинаково. Надеюсь, кто-то может сказать мне причину. Я заменю его наenОкружение такое же. )
Ну наконец тоmonthЭтот атрибут в языке имеет разные представления для месяца, кромеnumericи2-digitКроме того, он обладает тремя дополнительными свойствами:narrow,shortиlong. Отображается следующим образом:
const date = new Date();
date.toLocaleString('en', { month: 'narrow' }); //A
date.toLocaleString('en', { month: 'short' }); //Apr
date.toLocaleString('en', { month: 'long' }); //April
резюме
До сих пор оtoLocaleStringВведение подошло к концу. Видно, что в некоторых сценариях, когда вам нужно отформатировать объект в строку, это может сыграть большую роль, и вам больше не нужно писать функцию для преобразования. Хотя этоAPIЧуть менее популярный, но все равно интересный.
Спасибо всем судьям за то, что увидели это, легче сказать, чем сделать, надеюсь, эта статья будет вам полезна~ Спасибо!