Let’s Talk Template Literals

It’s interesting that there are so many ways to STDOUT text to the screen. Let’s look at a few of them in JavaScript (ES6) and Python (3.6)

Concatenation: This works in both JavaScript (console.log) and Python (print). “The first half of the sentence ” + “is joined to the second with a plus sign between the halves.” Also works with variables. “Hello, ” + user.name + ” and welcome to our shopping site.” Do pay attention to where spaces are.

Embedded expressions: Javascript allows developer to include simple expressions as well.

console.log( "Hello, " + user.name + ". Your total is: " + (purchase.subTotal + purchase.tax + purchase.delivery) + ".")

Hello, Kristopher. Your total is $123.45.

String formatting: Python 3.6 allows developers to include variables mid-string as follows:

print('We are the {} who say "{}!"'.format('knights', 'Ni')) 

We are the knights who say "Ni!"

But if you need to refer to the position of the argument (values passed in to ‘format()’ there’s also:

print('{0} and {1}'.format('spam', 'eggs')) 
spam and eggs


print('{1} and {0}'.format('spam', 'eggs')) 
eggs and spam

As well as keyword arguments, though I find this exceptionally cumbersome and wonder why the developer wouldn’t jut hard-code the values into this sentence. I’m including it because it’s in the Python docs and isn’t noted as being too archaic:

print('This {food} is {adjective}.'.format(food='spam', adjective='absolutely horrible')) 

This spam is absolutely horrible.

My personal preference, added to Python in 3.6 is the f-string

print(f'Welcome, {user.name}! Today's special is {special.name} and is on sale for {special.price}.')

Welcome, Kristopher! Today's special is Singing Rooster Coffee 12oz vacuum bag and is on sale for $10.

This is really easy to debug, in part because it reads very much like the end sentence, without extra punctuation. I also don’t have to type-cast my variables like in Python 2.7 (which required %s, %f and %i when referring to strings, floats and integers). Take a look at the Python docs for more examples and explanations: https://docs.python.org/3/tutorial/inputoutput.html

In JavaScript I’m growing attached to template literals. Like the f-string a template literal reads very much like the final product.

console.log(`Welcome, ${user.name}! Today's special is ${special.name} and is on sale for ${special.price}.`

Welcome, Kristopher! Today's special is tomato soup with grilled cheese sandwich and is on sale for $6.75.

The only catch here is to look for backticks (“ the keys that are left of the “1” on a US keyboard). At first they can look like single quotes, though most IDEs I’ve worked with do a good job of making the angle very obvious. MDN has done a great job with the documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Let’s Talk Template Literals

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s