Abrufen des Monatsnamens in JavaScript

1. Verwendung der Funktion toLocaleString in JavaScript
2. Verwendung des Intl.DateTimeFormat-Objekts in JavaScript
3. Verwenden von benutzerdefiniertem Code zum Abrufen des Monatsnamens von einem bestimmten Datum in JavaScript

In JavaScript haben wir eine Methode getMonth() des Datumsobjekts. Es gibt den Index eines Monats beginnend mit 0 zurück. Aber die meisten Anwendungen in realen Szenarien verlangen in diesem Monat eine alphabetische Benennung, um dem Endbenutzer das Lesen zu erleichtern. Es kann schwierig sein, Code zu schreiben, um den Monatsnamen für den angegebenen Monatsindex darzustellen. Sehen wir uns einige Möglichkeiten an, um den Namen eines Monats in JavaScript zu erhalten.

Verwendung der Funktion toLocaleString in JavaScript

Wir können die Funktion toLocaleString von Javascript verwenden, um den Monatsnamen aus einem Datumsobjekt zu erhalten. Es bietet Optionen, um die Monatsnamen in einer bestimmten Sprache zurückzugeben, die von der Funktion toLocaleString unterstützt wird.

Syntax der Funktion toLocaleString

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

Parameter:

Die Funktion wird normalerweise ohne Parameter verwendet, um die DatumsZeichenkette zu erhalten. toLocaleString akzeptiert zwei optionale Parameter, wobei der erste der Sprachschlüssel ist (zum Beispiel en-US für Englisch, ar-EG für Arabisch usw.) und der zweite ein Satz von Konfigurationen ist, die als option. Die option ist ein Objekt.

Rückgabetyp:

toLocaleString gibt einen Stringwert zurück, der das Datum im Format MM/DD/YYYY, hh:mm:ss a darstellt. a für AM / PM.

Wir können die Funktion verwenden, um sowohl die lange als auch die kürzere Form der Monatsnamen zu erhalten. Die längeren zeigen die vollständigen Monatsnamen an, während die kürzeren nur die ersten drei Zeichen des Monatsnamens in der Ausgabe auflisten. Die Verwendung ist wie folgt.

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);

Ausgabe:

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

Wir erhalten längere Monatsnamen, wobei { month: 'long' } als option übergeben wird. Für kürzere Monatsnamen müssen wir die Monatskonfiguration auf kurz setzen, wie in { month: 'short' }.

Notiz

• toLocaleString wird von allen Browsern unterstützt, auch vom Browser Internet Explorer.
• Der Vergleich der DatumsZeichenkettenausgabe mit einem Datum, das als Zeichenkette in einer Variablen gespeichert ist, führt möglicherweise nicht zu konsistenten Ergebnissen in allen Browsern. Der folgende Code kann beispielsweise in Firefox und Internet Explorer und älteren Versionen von MS Edge-Browsern anders ausgeführt werden.

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

Ausgabe in Chrome:

true

Ausgabe im Internet Explorer:

false

Dies liegt daran, dass der Internet Explorer und ältere Versionen von Edge Steuerzeichen am Anfang und Ende der DatumsZeichenkette einfügen. Sie können versuchen, die Länge der Stringausgabe von new Date("2021-01-05T12:30:00Z").toLocaleString("en-US") in Chrome und Internet Explorer zu überprüfen, um den Unterschied zu beobachten. IE gibt die Länge als 32 an, während Chrome sie als 20 angibt. Und auch das Zeichen an der nullten Position in IE-Konsolen als "", während es in Chrome "1" ergibt.

Verwendung des Intl.DateTimeFormat-Objekts in JavaScript

Intl.DateTimeFormat gibt ein DateTimeFormat Objekt zurück. Es hat eine format-Funktion, die das Zieldatum als Eingabe verwendet und es basierend auf den von uns festgelegten Optionen formatiert. Sie ähnelt der Funktion toLocaleString. Der Unterschied besteht darin, dass der toLocaleString auf ein Objekt mit dem Datentyp Datum angewendet wird. Im Intl.DateTimeFormat hingegen übergeben wir das Datum als Argument an die format Funktion. Die Parameternamen unterscheiden sich für verschiedene Datumsformatszenarien (weitere Informationen finden Sie in MDN-Dokumente). Intl.DateTimeFormat wird in allen Browsern unterstützt. Wir können die längeren und kürzeren Namen für die Monate mit Intl.DateTimeFormat erhalten, wie im folgenden Code dargestellt.

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'))

Ausgabe:

Jan
January

Notiz

• Zur Formatierung von Datumsangaben wird der Konstruktor Intl.DateTimeFormat erstellt. Intl.DateTimeFormat hat viel mehr Flexibilität bei der Formatierung der date-Objekte. Wir können es verwenden, um die DatumsZeichenkette in einer lokalen Sprache zu erhalten. Es unterstützt sogar eine Option zur Bereitstellung einer Fallback-Sprache in seinem options-Objekt.
• Es wird von allen Webbrowsern unterstützt, einschließlich der älteren Versionen von Internet Explorer.

Verwenden von benutzerdefiniertem Code zum Abrufen des Monatsnamens von einem bestimmten Datum in JavaScript

Wenn wir die beiden oben genannten integrierten JavaScript-Methoden nicht verwenden möchten, können wir einen benutzerdefinierten Code schreiben, um den Monatsnamen für ein entsprechendes Datum zu erhalten. Wir können den Code auf verschiedene Arten schreiben. Wir können zwei Arrays verwenden: eines mit den langen Monatsnamen und das andere mit kürzeren Monatsnamen. Es folgt jedoch der prägnante und effiziente Code, der ein einzelnes Array von Monatsnamen verwendet, um den vollständigen Namen und den Kurznamen zurückzugeben. Schauen wir uns den folgenden Code an.

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')));

Ausgabe:

January
Jan
November
Nov
December
Dec

Im obigen Code-Snippet verwenden wir zwei Funktionen: eine zum Abrufen des vollständigen Namens und die andere für kürzere.

• Wir codieren die Funktion getLongMonthName(), die ein Datumsobjekt als Parameter nimmt und den entsprechenden vollständigen Monatsnamen zurückgibt. Es verwendet die eingebaute Funktion in Javascript, getMonth(). Die Funktion getMonth() des Datumsobjekts gibt den Monatsindex zurück. Wir verwenden diesen Index, um den Monatsnamen aus dem Array monthNames zu erhalten, das die vollständigen Namen der Monate enthält.
• Wir haben die Funktion getShortMonthName, die einen zusätzlichen Schritt hat, um den Monatsnamen zu kürzen. Es verwendet dieselbe Logik wie getLongMonthName. Wir kürzen das Endergebnis mit der Funktion substring() von Javascript auf drei Zeichen. Daher erhalten wir den kurzen Monatsnamen für das als Parameter übergebene Datum.
• Möglicherweise müssen wir das Array monthNames ändern, um mehr als eine Sprache zu unterstützen, um die Lokalisierung und Internationalisierung des Codes zu ermöglichen. Wir können verschiedene String-Arrays zum Speichern von Monatsnamen verschiedener Sprachen verwenden. Und es mag nicht immer zutreffen, dass die kürzeren Monatsnamen nur aus den ersten drei Zeichen bestehen. Jede Sprache hat ihre Darstellung für kürzere Monatsnamen. Daher müssen wir für solche Sprachen möglicherweise zwei Arrays verwenden: eines mit den längeren Monatsnamen und das andere mit den kürzeren Monatsnamen. Die Logik in getLongMonthName() kann weiterhin verwendet werden, um den Monatsnamen zu erhalten, der dem als Parameter übergebenen Datumswert entspricht.