DanLevy.net

Quiz : 14 questions JavaScript sur les dates

Apprenez à épater la galerie avec des quiz JS ! ✨

Hero image for Quiz : 14 questions JavaScript sur les dates

À quel point maîtrisez‑vous la classe Date ?

Plan

La classe Date en JavaScript possède une API notoirement difficile. Elle provient de Java, et on peut supposer qu’elle s’inspire de méthodes de mesure du temps néolithiques.

La lutte pour maîtriser Date pousse de nombreux développeurs à recourir sans hésiter à des bibliothèques tierces. Bien que souvent sûres et fiables, ces bibliothèques sont rarement nécessaires pour le formatage ou la localisation des dates !

Ce quiz a pour but de tester (et d’approfondir) votre connaissance de l’API native Date. Utilisez les boutons verts pour obtenir des indices et des explications ! En théorie, à la fin du défi vous aurez consolidé votre compréhension de Date en JavaScript.

NOTE : Toutes les exemples supposent le fuseau horaire local GMT‑7.

👇 14 questions ci‑dessous 👇

Que contiendra la sortie ?

const d1 = new Date(2020, 1, 1)
console.log(d1)

L’argument month est indexé à zéro. Avec une plage de 0‑11 (pour les calendriers occidentaux.)

‘février’ a une valeur d’index de un. (Pensez-y comme à une recherche dans un tableau.)

Que contiendra la sortie ?

const d2 = new Date(2020, 0, 1)
console.log(d2)

L’argument month est indexé à zéro. Il varie de 0 à 11 (pour les calendriers occidentaux).

« January » a une valeur d’index zéro. (Pensez-y comme à une recherche dans un tableau.)

Que contiendra la sortie ?

const d3 = Date('Thu, 01 Jan 1970 00:00:00 GMT')
console.log(d3)

N’oubliez pas le mot‑clé new ! Date est une classe et doit être appelée avec new.

Date('...') sans new ignore ce que vous lui passez. Il semble toujours produire la date et l’heure actuelles avec new Date() (sans arguments).

C’est un piège courant qui est facile à négliger, même lors d’une revue de code.

Que contiendra la sortie ?

const date = new Date(2020)
console.log(date.getFullYear())

Une instance de Date créée avec un seul argument entier est interprétée comme une valeur Epoch Unix. Epoch représente le nombre de millisecondes écoulées depuis le 1er janvier 1970.

Une valeur de 2020 (millisecondes) correspond à 2 secondes après le 1er janvier 1970.

Ensuite, comme notre fuseau horaire local a un décalage négatif de -7 heures, on obtient Wed Dec 31 1969 17:00:02 GMT-0700 (Mountain Standard Time).

Vous pouvez contourner le décalage du fuseau horaire local en utilisant .getUTCFullYear().

Quelle valeur sera affichée dans la console ?

const d1 = new Date('2020-01-01')
const d2 = new Date('2020-01-01T00:00')
console.log(d1.getFullYear(), d2.getFullYear())

La chaîne sans valeur de temps T peut sembler être le 1er janvier 2020 – mais les chaînes contenant uniquement une date sont interprétées en UTC, et une fois ajustées à notre fuseau horaire local (GMT‑7) nous sommes encore en 2019.

Les chaînes date‑heure sans fuseau horaire explicite sont interprétées en heure locale.

La forme T00:00 fait que la seconde valeur est interprétée comme minuit locale.

La première date est interprétée comme Tue Dec 31 2019 17:00:00 GMT-0700 (Mountain Standard Time). La deuxième date est interprétée comme Wed Jan 01 2020 00:00:00 GMT-0700 (Mountain Standard Time).

Sélectionnez une méthode de formatage incorrecte :

La méthode toLocaleFormat() n’est pas standard ! Elle peut sembler familière car elle provient d’une vieille bibliothèque tierce.

Consultez la documentation de la méthode toLocaleDateString. Son comportement est documenté sous Intl.DateTimeFormat.

Que contiendra la sortie ?

var date = Date.UTC('2020-01-02T00:00')
console.log(date.toUTCString())

Vous obtiendrez TypeError: date.toUTCString is not a function, car Date.UTC() renvoie un entier en millisecondes, pas une instance de date.

Que contiendra la sortie ?

const d = Date.UTC(2020, 0, 1)
console.log(d)

La méthode d’aide Date.UTC ne renvoie pas une instance de date. Elle renvoie un entier en millisecondes.

Que contiendra la sortie ?

// Assume local TZ is -07:00
const d = new Date(Date.UTC(2020, 0, 1))
console.log(d.getTimezoneOffset())

Les objets Date sont présentés implicitement en heure locale, avec un (effectivement) immuable .getTimezoneOffset().

Les instances Date ne stockent pas de données de fuseau horaire. Elles stockent le nombre de millisecondes écoulées depuis l’époque Unix (1 janvier 1970). Le fuseau horaire est pris en compte lors de l’analyse et du rendu des chaînes de date. Le comportement d’affichage par défaut est déterminé automatiquement en fonction des paramètres régionaux du système ou du navigateur.

Que contiendra la sortie ?

const d = new Date(2020, 0, 1)
d.setDate(1)
console.log(d)

La méthode .setDate() définit le jour du mois, en fonction du mois actuel de l’instance donnée.

Si une valeur est fournie en dehors du nombre de jours disponibles, la valeur du mois de l’instance sera ajustée (par ex. un setDate(32) en janvier sera calculé comme le 1er février.)

Que contiendra la sortie ?

const d = new Date(2020, 0, 1)
d.setMonth(1)
console.log(d)

La méthode .setMonth() définit le mois de l’instance de date fournie.

Le paramètre month est indexé à zéro, avec une plage de 0 à 11 (calendriers occidentaux).

Que contiendra la sortie ?

const d = new Date(2020, 0, 1)
d.setMonth(12)
console.log(d)

La méthode .setMonth() définit le mois de l’instance de date fournie.

Le paramètre month est indexé à zéro, avec 12 valeurs possibles dans la plage 0‑11 (calendriers occidentaux).

Ici, l’année passe à 2021, car setMonth(12) représente un mois au‑delà de 11 (décembre).

Que contiendra la sortie ?

const d = new Date(2020, 0, 1)
d.setMonth(13)
console.log(d)

La méthode .setMonth() définit le mois de l’instance de date fournie.

Le paramètre month est indexé à zéro, avec une plage de 0 à 11 (calendriers occidentaux).

Ici, le mois et l’année sont ajustés à février 2021, parce que setMonth(13) correspond à 2 de plus que 11 (décembre).

Que contiendra la sortie ?

const d = new Date(2020, 0, 1)
d.setMonth(-1)
console.log(d)

La méthode .setMonth() définit le mois de l’instance de date fournie.

L’argument month est indexé à zéro, avec une plage de 0‑11 (calendriers occidentaux).

Ici, le mois et l’année reculent à décembre 2019, car setMonth(-1) est inférieur à 0 (janvier).