Einführung
Datum und Uhrzeit sind fester Bestandteil unseres Alltags und spielen daher eine wichtige Rolle in der Computerprogrammierung. In JavaScript müssen Sie möglicherweise eine Website mit einem Kalender, einem Zugfahrplan oder einer Benutzeroberfläche zum Einrichten von Terminen erstellen. Diese Anwendungen müssen relevante Zeiten basierend auf der aktuellen Zeitzone des Benutzers anzeigen oder Berechnungen für Ankunfts- und Abflugzeiten sowie Start- und Endzeiten durchführen. Darüber hinaus müssen Sie möglicherweise JavaScript verwenden, um jeden Tag zu einer bestimmten Uhrzeit einen Bericht zu erstellen oder um nach aktuell geöffneten Restaurants und Einrichtungen zu filtern.
Um all diese Ziele und mehr zu erreichen, wird JavaScript mit dem eingebauten Objekt "+ Date" und verwandten Methoden ausgeliefert. In diesem Tutorial erfahren Sie, wie Sie Datum und Uhrzeit in JavaScript formatieren und verwenden.
Das Datumsobjekt
Das Objekt + Date + object ist ein in JavaScript integriertes Objekt, das Datum und Uhrzeit speichert. Es bietet eine Reihe integrierter Methoden zum Formatieren und Verwalten dieser Daten.
Standardmäßig erstellt eine neue "+ Date +" - Instanz ohne Argumente ein Objekt, das dem aktuellen Datum und der aktuellen Uhrzeit entspricht. Dies wird gemäß den aktuellen Systemeinstellungen des Computers erstellt.
Um das "+ Datum +" von JavaScript zu demonstrieren, erstellen wir eine Variable und weisen ihr das aktuelle Datum zu. Dieser Artikel wird am Mittwoch, dem 18. Oktober in London (GMT) verfasst. Das ist das aktuelle Datum, die Uhrzeit und die Zeitzone, die unten dargestellt werden.
now.js
// Set variable to current date and time
const now = new Date();
// View the output
now;OutputWed Oct 18 2017 12:41:34 GMT+0000 (UTC)In der Ausgabe haben wir eine Datumszeichenfolge, die Folgendes enthält:
| Day of the Week | Month | Day | Year | Hour | Minute | Second | Timezone |
|---|---|---|---|---|---|---|---|
Wed |
Oct |
18 |
2017 |
12 |
41 |
34 |
GMT+0000 (UTC) |
Das Datum und die Uhrzeit sind so aufgeschlüsselt und gedruckt, dass wir sie als Menschen verstehen können.
JavaScript versteht das Datum jedoch basierend auf einem * Zeitstempel *, der von Unix time abgeleitet ist. Dieser Wert besteht aus der Anzahl der Millisekunden, die seit Mitternacht vergangen sind am 1. Januar 1970. Wir können den Zeitstempel mit der Methode + getTime () + erhalten.
// Get the current timestamp
now.getTime();Output1508330494000Die große Zahl, die in unserer Ausgabe für den aktuellen Zeitstempel angezeigt wird, entspricht dem oben genannten Wert vom 18. Oktober 2017.
-
Epochenzeit *, auch als Nullzeit bezeichnet, wird durch die Datumszeichenfolge "01 Januar 1970 00:00:00 Weltzeit (UTC) +" und den Zeitstempel " 0 " dargestellt. Wir können dies im Browser testen, indem wir eine neue Variable erstellen und ihr eine neue " Date " - Instanz zuweisen, die auf einem Zeitstempel von " 0 +" basiert.
epoch.js
// Assign the timestamp 0 to a new variable
const epochTime = new Date(0);
epochTime;Output01 January, 1970 00:00:00 Universal Time (UTC)Die Epochenzeit wurde als Standard für Computer gewählt, um die Zeit in früheren Tagen der Programmierung zu messen, und diese Methode wird von JavaScript verwendet. Es ist wichtig, das Konzept sowohl des Zeitstempels als auch der Datumszeichenfolge zu verstehen, da beide abhängig von den Einstellungen und dem Zweck einer Anwendung verwendet werden können.
Bisher haben wir gelernt, wie eine neue + Date-Instanz basierend auf der aktuellen Zeit erstellt wird und wie eine Instanz basierend auf einem Zeitstempel erstellt wird. Insgesamt gibt es vier Formate, mit denen Sie ein neues "+ Datum" in JavaScript erstellen können. Zusätzlich zum aktuellen Zeitstandard und Zeitstempel können Sie auch eine Datumszeichenfolge verwenden oder bestimmte Daten und Zeiten angeben.
| Date Creation | Output |
|---|---|
|
Current date and time |
|
Creates date based on milliseconds since Epoch time |
|
Creates date based on date string |
|
Creates date based on specified date and time |
Um die verschiedenen Arten der Bezugnahme auf ein bestimmtes Datum zu demonstrieren, erstellen wir neue "+ Date +" - Objekte, die den 4. Juli 1776 um 12.30 Uhr GMT auf drei verschiedene Arten darstellen.
usa.js
// Timestamp method
new Date(-6106015800000);
// Date string method
new Date("January 31 1980 12:30");
// Date and time method
new Date(1776, 6, 4, 12, 30, 0, 0);In den drei Beispielen wird vor allem ein Datum erstellt, das dieselben Informationen enthält.
Sie werden feststellen, dass die Zeitstempelmethode eine negative Zahl hat. Jedes Datum vor der Epochenzeit wird als negative Zahl dargestellt.
Bei der Datums- und Uhrzeitmethode werden unsere Sekunden und Millisekunden auf "+ 0 " gesetzt. Fehlt eine Nummer in dem erstellten " Datum", wird standardmäßig "+ 0 " verwendet. Die Reihenfolge kann jedoch nicht geändert werden. Denken Sie also daran, wenn Sie eine Nummer weglassen möchten. Möglicherweise stellen Sie auch fest, dass der Monat Juli durch " 6 " und nicht durch das übliche " 7 " dargestellt wird. Dies liegt daran, dass die Datums- und Zeitangaben ab ` 0 +` beginnen, wie dies bei der Programmierung am häufigsten der Fall ist. Im nächsten Abschnitt finden Sie eine detailliertere Tabelle.
Abrufen des Datums mit + get +
Sobald wir ein Datum haben, können wir mit verschiedenen integrierten Methoden auf alle Komponenten des Datums zugreifen. Die Methoden geben jeden Teil des Datums relativ zur lokalen Zeitzone zurück. Jede dieser Methoden beginnt mit "+ get " und gibt die relative Zahl zurück. Nachfolgend finden Sie eine detaillierte Tabelle der " get" -Methoden des "+ Date" -Objekts.
| Date/Time | Method | Range | Example |
|---|---|---|---|
Year |
|
YYYY |
1970 |
Month |
|
0-11 |
0 = January |
Day (of the month) |
|
1-31 |
1 = 1st of the month |
Day (of the week) |
|
0-6 |
0 = Sunday |
Hour |
|
0-23 |
0 = midnight |
Minute |
|
0-59 |
|
Second |
|
0-59 |
|
Millisecond |
|
0-999 |
|
Timestamp |
|
Milliseconds since Epoch time |
Nehmen wir ein neues Datum vor, das auf dem 31. Juli 1980 basiert, und weisen Sie es einer Variablen zu.
harryPotter.js
// Initialize a new birthday instance
const birthday = new Date(1980, 6, 31);Jetzt können wir alle unsere Methoden verwenden, um jede Datumskomponente von Jahr bis Millisekunde abzurufen.
getDateComponents.js
birthday.getFullYear(); // 1980
birthday.getMonth(); // 6
birthday.getDate(); // 31
birthday.getDay(); // 4
birthday.getHours(); // 0
birthday.getMinutes(); // 0
birthday.getSeconds(); // 0
birthday.getMilliseconds(); // 0
birthday.getTime(); // 333849600000 (for GMT)Manchmal kann es notwendig sein, nur einen Teil eines Datums zu extrahieren, und die eingebauten "+ get +" - Methoden sind das Werkzeug, mit dem Sie dies erreichen.
Zum Beispiel können wir das aktuelle Datum mit dem Tag und dem Monat des 3. Oktober vergleichen, um festzustellen, ob es der 3. Oktober ist oder nicht.
oct3.js
// Get today's date
const today = new Date();
// Compare today with October 3rd
if (today.getDate() === 3 && today.getMonth() === 9) {
console.log("It's October 3rd.");
} else {
console.log("It's not October 3rd.");
}OutputIt's not October 3rd.Da es zum Zeitpunkt des Schreibens noch nicht der 3. Oktober ist, gibt die Konsole dies wieder.
Mit den integrierten Methoden "+ Date", die mit "+ get" beginnen, können wir auf Datumskomponenten zugreifen, die die Nummer zurückgeben, die dem entspricht, was wir vom instanziierten Objekt abrufen.
Ändern Sie das Datum mit + set +
Für alle oben beschriebenen '+ get'-Methoden gibt es eine entsprechende' + set'-Methode. Wenn "+ get " verwendet wird, um eine bestimmte Komponente von einem Datum abzurufen, wird " set " verwendet, um Komponenten eines Datums zu ändern. Nachfolgend finden Sie eine detaillierte Tabelle der Methoden des Objekts " Date".
| Date/Time | Method | Range | Example |
|---|---|---|---|
Year |
|
YYYY |
1970 |
Month |
|
0-11 |
0 = January |
Day (of the month) |
|
1-31 |
1 = 1st of the month |
Day (of the week) |
|
0-6 |
0 = Sunday |
Hour |
|
0-23 |
0 = midnight |
Minute |
|
0-59 |
|
Second |
|
0-59 |
|
Millisecond |
|
0-999 |
|
Timestamp |
|
Milliseconds since Epoch time |
Wir können diese + set + - Methoden verwenden, um eine, mehrere oder alle Komponenten eines Datums zu ändern. Beispielsweise können wir das Jahr unserer Variablen "+ birthday " von oben in " 1997 " anstelle von " 1980 +" ändern.
harryPotter.js
// Change year of birthday date
birthday.setFullYear(1997);
birthday;OutputThu Jul 31 1997 00:00:00 GMT+0000 (UTC)Im obigen Beispiel sehen wir, dass wir das neue Jahr als Teil der Ausgabe erhalten, wenn wir die Variable "+ birthday +" aufrufen.
Mit den integrierten Methoden, die mit "+ set " beginnen, können wir verschiedene Teile eines " Date" -Objekts ändern.
Datumsmethoden mit UTC
Mit den oben beschriebenen Methoden "+ get " werden die Datumskomponenten basierend auf den lokalen Zeitzoneneinstellungen des Benutzers abgerufen. Um die Kontrolle über Datum und Uhrzeit zu verbessern, können Sie die Methoden " getUTC " verwenden, die genau den Methoden " get " entsprechen, mit der Ausnahme, dass sie die Zeit basierend auf https://en.wikipedia.org/ berechnen. wiki / Coordinated_Universal_Time [UTC (Coordinated Universal Time)] Standard. Unten finden Sie eine Tabelle der UTC-Methoden für das JavaScript-Objekt ` Date`.
| Date/Time | Method | Range | Example |
|---|---|---|---|
Year |
|
YYYY |
1970 |
Month |
|
0-11 |
0 = January |
Day (of the month) |
|
1-31 |
1 = 1st of the month |
Day (of the week) |
|
0-6 |
0 = Sunday |
Hour |
|
0-23 |
0 = midnight |
Minute |
|
0-59 |
|
Second |
|
0-59 |
|
Millisecond |
|
0-999 |
Um den Unterschied zwischen der lokalen und der UTC-Methode + get + zu testen, können Sie den folgenden Code ausführen.
UTC.js
// Assign current time to a variable
const now = new Date();
// Print local and UTC timezones
console.log(now.getHours());
console.log(now.getUTCHours());Wenn Sie diesen Code ausführen, werden die aktuelle Stunde und die Stunde der UTC-Zeitzone ausgedruckt. Wenn Sie sich derzeit in der UTC-Zeitzone befinden, stimmen die Zahlen, die beim Ausführen des obigen Programms ausgegeben werden, überein.
UTC ist insofern nützlich, als es eine internationale Zeitstandardreferenz bereitstellt und Ihren Code daher über Zeitzonen hinweg konsistent halten kann, wenn dies auf Ihre Entwicklung zutrifft.
Fazit
In diesem Lernprogramm haben wir gelernt, wie Sie eine Instanz des Objekts "+ Date +" erstellen und mithilfe der integrierten Methoden auf Komponenten eines bestimmten Datums zugreifen und diese ändern. Eine detailliertere Darstellung von Datums- und Uhrzeitangaben in JavaScript finden Sie in der Referenz Date in Mozilla Developer Netzwerk.
Das Arbeiten mit Datumsangaben ist für viele häufige Aufgaben in JavaScript von entscheidender Bedeutung, da Sie so viele Dinge tun können, von der Erstellung eines sich wiederholenden Berichts bis zur Anzeige von Datumsangaben und Zeitplänen in der richtigen Zeitzone.