ES6 Templates

ES6 Templates

ES6 Templates

ES6 Templates

ES6 Templates

ES6 Templates

ES6 Templates

Stuff you probably

already know.

let a = 'a string'
let b = "another string"
let c = new String('don’t try this one at home')

let d = `ooh, the new shiny`
let e = `'"‘’“”`
let f = `this
is
a
string
on
multiple
lines`
let g = 'everyone'

// logs "Hello, everyone"
console.log(`Hello, ${g}`)
let h = 1
let i = 2

// logs "1 + 2 = 3"
console.log(`${h} + ${i} = ${h + i}`)
let h = 1
let i = 2

function sum(a, b) {
    return a + b
}

// logs "1 + 2 = 3"
console.log(`${h} + ${i} = ${sum(h, i)}`)
function composeName(title, fname, lname, degree) {
    return `${title} ${fname} ${lname}${
        degree ? `, ${degree}`
               : ''
    }`
}

// returns "Rear Admiral Grace Hopper, PhD"
composeName('Rear Admiral', 'Grace', 'Hopper', 'PhD')

// returns "Ms Betty Holberton"
composeName('Ms', 'Betty', 'Holberton')

Stuff you may

not know.

let simpleExample = (literals, ...substitutions) => {
    return [literals[0], substitutions[0]].join('')
}

let who = 'everyone'

// returns "Hello, everyone"
simpleExample`Hello, ${who}`
let simpleExample = literals => ({
    format: (...substitutions) => {
        return [literals[0], substitutions[0]].join('')
    }
})

// returns "Hello, everyone"
simpleExample`Hello, ${0}`.format('everyone')

let simpleExample = literals => ({
    format: (...substitutions) => {
        return [literals[0], substitutions[0]].join('')
    }
})

let greeting = simpleExample`Hello, ${0}`

// returns "Hello, everyone"
greeting.format('everyone')

let formatter = literals => {
    return {
        format: (...substitutions) => {
            let output = []
            for (let i = 0; i < literals.length; i += 1) {
                output.push(literals[i])
                output.push(substitutions[i])
            }
            return output.join('')
        }
    }
}

let greeting = formatter`Hello, ${0}. How are ${0}?`

// returns "Hello, everyone. How are we?"
greeting.format('everyone', 'we')

let formatter = literals => ({
    format: (...substitutions) => {
        return literals.reduce((accumulator, part, i) => {
            return accumulator + substitutions[i - 1] + part
        })
    }
})

let greeting = formatter`Hello, ${0}. How are ${0}?`

// returns "Hello, everyone. How are we?"
greeting.format('everyone', 'we')

let formatter = (literals, ...keys) => {
    return {
        format: (...substitutions) => {
            let output = []
            for (let i = 0; i < literals.length; i += 1) {
                output.push(literals[i])
                output.push(substitutions[keys[i]])
            }
            return output.join('')
        }
    }
}

let greeting = formatter`Hello, ${0}. How are ${0}?`

// returns "Hello, everyone. How are everyone?"
greeting.format('everyone', 'we')

Fascinating.
So what?

let formatter = (literals, ...keys) => {
    return {
        format: (l10n, ...substitutions) => {
            let output = []
            for (let i = 0; i < literals.length; i += 1) {
                output.push(literals[i])
                if (l10n)
                    output.push(l10n(substitutions[keys[i]]))
                else
                    output.push(substitutions[keys[i]])
            }
            return output.join('')
        }
    }
}
let l10n = lang => {
    return str => {
        return strings[lang] && strings[lang][str] || str
    }
}

let strings = {
    'en': { 'Hello': 'Hello' },
    'pt': { 'Hello': 'Olà' }
}

formatter`${0}`.format(null, 'Hello') // "Hello"
formatter`${0}`.format(l10n('en'), 'Hello') // "Hello"
formatter`${0}`.format(l10n('pt'), 'Hello') // "Olà"
formatter`${0}`.format(l10n('xyz'), 'Hello') // "Hello"
formatter`${0}`.format(l10n('en'), 'Bonjour') // "Bonjour"
let l10ner = l10n('pt')
let greeting = formatter`${0}`

// outputs "Olà"
greeting.format(l10ner, 'Hello')

Thank you!

Thank you!

Thank you!

Thank you!

 

Thank you!

Thank you!

Thank you!

@segdeha

segdeha.com/es6-templates

ES6 Templates

By Andrew Hedges

Made with Slides.com

ES6 Templates

ECMAScript 2015 (ES6) ushered in a host of new features including template literals. Here, we dive into examples that go beyond simple substitutions.

  • 722

More from Andrew Hedges