Formatera datum
Visa datum med alternativen i toLocaleDateString.
Formatera datum är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.
Formatera datum
JavaScript har flera inbyggda metoder för att omvandla ett datum till läsbar text, från locale-anpassad utdata till standardiserade ISO-strängar.
const d = new Date(Date.UTC(2024, 0, 15))
console.log(d.toISOString())toISOString
toISOString returnerar en standardiserad sträng i UTC, vilket är idealiskt för lagring och datautbyte eftersom formatet är entydigt.
const d = new Date(Date.UTC(2024, 0, 15, 10, 30, 0))
console.log(d.toISOString())Ta ut en del av ISO-strängen
ISO-strängen placerar datumet först, så du kan ta ut de första tio tecknen för att få enbart kalenderdatumet.
const d = new Date(Date.UTC(2024, 0, 15))
console.log(d.toISOString().slice(0, 10))toLocaleDateString
toLocaleDateString formaterar datumdelen med hjälp av en locale och ger regionsanpassad utdata.
const d = new Date(Date.UTC(2024, 0, 15))
const text = d.toLocaleDateString("en-US", { timeZone: "UTC" })
console.log(typeof text)Locale-argument
Det första argumentet är en locale-tagg som en-US eller de-DE, vilket ändrar ordningen och avgränsarna i det formaterade datumet.
const d = new Date(Date.UTC(2024, 0, 15))
const us = d.toLocaleDateString("en-US", { timeZone: "UTC" })
const iso = d.toISOString().slice(0, 10)
console.log(typeof us, iso)Formateringsalternativ
Ett options-objekt låter dig välja hur varje del ska visas, till exempel som ett långt månadsnamn eller ett numeriskt år.
const d = new Date(Date.UTC(2024, 0, 15))
const text = d.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric", timeZone: "UTC" })
console.log(typeof text)toLocaleTimeString
toLocaleTimeString formaterar endast tidsdelen och tar återigen hänsyn till den locale och de alternativ du anger.
const d = new Date(Date.UTC(2024, 0, 15, 14, 5, 0))
const text = d.toLocaleTimeString("en-US", { timeZone: "UTC" })
console.log(typeof text)toLocaleString
toLocaleString kombinerar datum och tid i en enda lokaliserad sträng.
const d = new Date(Date.UTC(2024, 0, 15, 9, 0, 0))
const text = d.toLocaleString("en-US", { timeZone: "UTC" })
console.log(typeof text)toDateString
toDateString ger ett fast, läsbart datum på engelska utan locale-alternativ och är användbart för snabb loggning.
const d = new Date(Date.UTC(2024, 0, 15))
console.log(typeof d.toDateString())Intl.DateTimeFormat
Vid upprepad formatering skapar Intl.DateTimeFormat ett återanvändbart formateringsobjekt, vilket är effektivare än att anropa localemetoder många gånger.
const fmt = new Intl.DateTimeFormat("en-US", { timeZone: "UTC", dateStyle: "medium" })
const d = new Date(Date.UTC(2024, 0, 15))
console.log(typeof fmt.format(d))Välja format
Använd ISO-strängar för lagring och API:er och localemetoder för visning för användare i deras region. Håll dessa syften åtskilda.
const d = new Date(Date.UTC(2024, 0, 15))
console.log(d.toISOString().slice(0, 10))Snabbtest
Testa dina kunskaper om formatering.
Sammanfattning
Sammanfattning: Välj rätt formateringsmetod för uppgiften.
- toISOString för lagring och API:er
- toLocaleDateString och liknande metoder för visning för användare
- Alternativ styr månadsnamn och talformat
- Intl.DateTimeFormat är effektivt vid upprepad formatering
const d = new Date(Date.UTC(2024, 0, 15))
console.log(d.toISOString().slice(0, 10))
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 59
- Lektioner
- 200
Vanliga frågor
Är lektionen ”Formatera datum” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Formatera datum”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Formatera datum”?
Visa datum med alternativen i toLocaleDateString. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?
Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Formatera datum”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?
Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.