Obtenir le nom du mois en JavaScript

1. Utilisation de la fonction toLocaleString en JavaScript
2. Utilisation de l’objet Intl.DateTimeFormat en JavaScript
3. Utilisation de code personnalisé pour obtenir le nom du mois à partir d’une date donnée en JavaScript

En JavaScript, nous avons une méthode getMonth() de l’objet date. Il renvoie l’indice d’un mois à partir de 0. Mais la plupart des applications dans des scénarios du monde réel exigent que ce mois-ci soit en nom alphabétique pour faciliter la lecture par l’utilisateur final. Il peut être difficile d’écrire du code pour représenter le nom du mois pour l’index de mois donné. Voyons quelques façons d’obtenir le nom d’un mois en JavaScript.

Utilisation de la fonction toLocaleString en JavaScript

Nous pouvons utiliser la fonction toLocaleString de javascript pour obtenir le nom du mois à partir d’un objet date. Il offre des options pour retourner les noms de mois dans une langue donnée supportée par la fonction toLocaleString.

Syntaxe de la fonction toLocaleString

toLocaleString()
toLocaleString(locales)
toLocaleString(locales, options)

Paramètres:

La fonction est généralement utilisée sans aucun paramètre pour obtenir la chaîne de date. toLocaleString accepte deux paramètres optionnels, le premier étant la clé de langue (par exemple, en-US pour l’anglais, ar-EG pour l’arabe etc.), et le second est un ensemble de configurations passées comme options. Le options sont un objet.

Type de retour :

toLocaleString renvoie une valeur de chaîne représentant la date au format MM/DD/YYYY, hh:mm:ss a. a pour AM / PM.

Nous pouvons utiliser la fonction pour obtenir à la fois les formes longues et courtes des noms de mois. Les plus longs affichent les noms de mois complets, tandis que les plus courts ne répertorient que les trois premiers caractères du nom du mois dans la sortie. L’utilisation est la suivante.

const dateObj = new Date('1-1-2021');
const dateString = dateObj.toLocaleString();
const enDateString = dateObj.toLocaleString('en-US');
const monthNameLong = dateObj.toLocaleString('en-US', {month: 'long'});
const monthNameShort = dateObj.toLocaleString('en-US', {month: 'short'});
console.log(dateString);
console.log(enDateString);
console.log(monthNameLong);
console.log(monthNameShort);

Production:

1/1/2021, 12:00:00 AM
1/1/2021, 12:00:00 AM
January
Jan

Nous obtenons des noms de mois plus longs avec le { month: 'long' } passé comme option. Pour les noms de mois plus courts, nous devons définir la configuration du mois sur short comme dans { month: 'short' }.

Noter

• toLocaleString est pris en charge par tous les navigateurs, y compris le navigateur Internet Explorer.
• La comparaison de la sortie de la chaîne de date à une date stockée sous forme de chaîne dans une variable peut ne pas donner des résultats cohérents entre les navigateurs. Par exemple, le code suivant peut s’exécuter différemment dans Firefox et Internet Explorer et les anciennes versions des navigateurs MS Edge.

('1/5/2021, 6:00:00 PM' ===
 new Date('2021-01-05T12:30:00Z').toLocaleString('en-US')) ?
    true :
    false;

Sortie dans Chrome :

true

Sortie dans Internet Explorer :

false

Cela se produit parce qu’Internet Explorer et les anciennes versions d’Edge insèrent des caractères de contrôle au début et à la fin de la chaîne de date. Vous pouvez essayer de vérifier la longueur de la chaîne sortie par new Date("2021-01-05T12:30:00Z").toLocaleString("en-US") dans Chrome et Internet Explorer pour observer la différence. IE dit que la longueur est 32 alors que chrome le dit 20. Et aussi, le caractère à la position zéro dans les consoles IE est "" alors que dans chrome, il donne "1".

Utilisation de l’objet Intl.DateTimeFormat en JavaScript

Intl.DateTimeFormat renvoie un objet DateTimeFormat. Il a une fonction format qui prend la date cible en entrée et la formate en fonction des options que nous avons définies. Elle est similaire à la fonction toLocaleString. La différence est que le toLocaleString est appliqué sur un objet avec le type de données comme date. Alors que dans le Intl.DateTimeFormat, nous passons la date en argument à la fonction format. Les noms de paramètres diffèrent pour divers scénarios de format de date (Reportez-vous à MDN docs pour plus de détails). Intl.DateTimeFormat est pris en charge dans tous les navigateurs. Nous pouvons obtenir les noms plus longs et plus courts pour les mois en utilisant Intl.DateTimeFormat comme illustré dans le code suivant.

new Intl.DateTimeFormat('en-US', {month: 'short'})
    .format(new Date('1-1-2021')) new Intl
    .DateTimeFormat('en-US', {month: 'long'})
    .format(new Date('1-1-2021'))

Production:

Jan
January

Noter

• Le constructeur Intl.DateTimeFormat est créé pour le formatage des dates. Intl.DateTimeFormat a beaucoup plus de flexibilité avec le formatage des objets date. Nous pouvons l’utiliser pour obtenir la chaîne de date dans une langue locale. Il prend même en charge une option pour fournir une langue de secours dans son objet options.
• Il est pris en charge dans tous les navigateurs Web, y compris les anciennes versions d’Internet Explorer.

Utilisation de code personnalisé pour obtenir le nom du mois à partir d’une date donnée en JavaScript

Si nous ne voulons pas utiliser les deux méthodes JavaScript intégrées ci-dessus, nous pouvons écrire un code personnalisé pour obtenir le nom du mois pour une date correspondante. Nous pouvons écrire le code de différentes manières. Nous pouvons utiliser deux tableaux : un contenant les noms de mois longs et l’autre avec des noms de mois plus courts. Mais voici le code concis et efficace qui utilise un seul tableau de noms de mois pour renvoyer le nom complet et le nom abrégé. Regardons le code suivant.

const monthNames = [
  'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August',
  'September', 'October', 'November', 'December'
];

getLongMonthName =
    function(date) {
  return monthNames[date.getMonth()];
}

getShortMonthName =
    function(date) {
  return monthNames[date.getMonth()].substring(0, 3);
}

    console.log(getLongMonthName(new Date('1-1-2021')));
console.log(getShortMonthName(new Date('1-1-2021')));
console.log(getLongMonthName(new Date('11-5-2021')));
console.log(getShortMonthName(new Date('11-5-2021')));
console.log(getLongMonthName(new Date('12-8-2021')));
console.log(getShortMonthName(new Date('12-8-2021')));

Production:

January
Jan
November
Nov
December
Dec

Nous utilisons deux fonctions dans l’extrait de code ci-dessus : une pour obtenir le nom complet et l’autre pour les plus courts.

• On code la fonction getLongMonthName() qui prend en paramètre un objet date et renvoie le nom complet du mois qui lui correspond. Il utilise la fonction intégrée en javascript, getMonth(). La fonction getMonth() de l’objet date renvoie l’index du mois. Nous utilisons cet index pour obtenir le nom du mois à partir du tableau monthNames qui contient le nom complet des mois.
• Nous avons la fonction getShortMonthName qui a une étape supplémentaire pour raccourcir le nom du mois. Il utilise la même logique que getLongMonthName. Nous tronquons le résultat final à trois caractères en utilisant la fonction substring() de javascript. Par conséquent, nous obtenons le nom court du mois pour la date passée en paramètre.
• Nous pouvons avoir besoin de modifier le tableau monthNames pour prendre en charge plus d’une langue pour permettre la localisation et l’internationalisation du code. Nous pouvons utiliser différents tableaux de chaînes pour stocker les noms de mois de différentes langues. Et il n’est peut-être pas toujours vrai que les noms de mois les plus courts ne soient que les trois premiers caractères. Chaque langue a sa représentation pour les noms de mois plus courts. Par conséquent, nous devrons peut-être utiliser deux tableaux pour de telles langues : l’un contenant les noms de mois les plus longs et l’autre contenant les noms de mois plus courts. La logique dans getLongMonthName() peut toujours être utilisée pour obtenir le nom du mois correspondant à la valeur de date passée en paramètre.