Use Template Literals in ES6
ECMAscript 6 lets us use string templates to gain a lot more control over strings in JavaScript.
Man 1: [00:00] If you have ever worked with strings in JavaScript, you've most likely concatenated two strings by just saying the variable than plus and then adding a string to it, and then when you run it, you just get hello world, all put together.
[00:12] ES6 allows you to put your variables inside of your string. I'm going to surround this with a [inaudible] . So I'll put one there and I'll put one here.
[00:21] Then, instead of doing plus and then quote, I'll just surround this guy with the dollar sign, curly brace, and then close curly brace. You'll see if I rerun this, I'll get hello world.
[00:35] It actually maintained this space because I forgot to delete it. So if I delete that and run it again, then we'll get hello world without the space.
[00:43] It actually respects white space even across multiple lines. If I put some lines in here and if I say "hello," tab, tab, "world," and run this. You'll see I get some blank lines, hello all the way at the left and then a couple tabs, and then world, and then more blank lines.
[01:00] I could pull off things like hello you crazy world, how are you, and rerun this and you can see, we can manipulate strings however we'd like.
[01:17] If I want to extract any of these into variables, I could just instead of world here, I could just do place and then I can do place. We'll just say "planet," and rerun this, and you can see we get hello, you crazy planet, all the way out here.
[01:36] It's also worth noting that you can do expressions inside of these braces. If you want to do X + Y, then just show Y and just show X, and then run this. You can see we get 1 + 2 = 3, and then this is one.
[01:50] There's this string plus, there's two, there's the string equals, and then X + Y is the expression.
[01:58] Lastly, is a basic introduction to tagging these string templates that I have. It's and then the hour of the day, and then, I'm sleepy. If I run this, you'll see it's 15 or 3 o'clock, and that I'm sleepy.
[02:12] I don't get sleepy until after 20, so all I have here is this and how am I going to make this into a variable? Well, I can actually parse out this message and get this value and change this string based on this value.
[02:27] I'm going to create a function called, "tag," and notice I don't put any sort of parameters or anything around this. I just type the function name.
[02:36] I'll say, "Function tag," you can name it whatever you want, tag or parse, or whatever, and then it takes these strings and the values, these strings being an array.
[02:49] We'll log this out. The array of it's and I'm sleepy are the two strings. This piece and this piece, and then the values are the values found in here.
[03:04] When I log this out, this will be an array with just 15 in it. So switch this over to a value. We'll just make it an empty value.
[03:13] Then, we'll say, if the first value, so value 0is less than 20. I'll assign the second value and say this should be "I'm awake."
[03:28] Then, we will turn a new string. So two back ticks, and we'll just say, strings zero values, zero, strings one, and values one.
[03:48] Then, once we log this out, you can see it says, "It's 15, I'm awake," because 15 is less than 20 and we assign this second value which is this guy to awake.
[04:04] Now, there's much more advanced stuff you can do with this such as parsing HTML and using RegEx and everything, but we're going to end right there for right now.
[04:12] [cuts off]
Not a criticism of the lesson but a comment on the code function tag(strings, ...values){ The code that produces is hard to read maintain. The template syntax is great referring to variables by name. Nice and readable. But then using the tag function to manipulate the strings where positional arguments are inferred or hidden behind the runtime output leads to maintainability errors. I wonder if there is a better example of using the tag type syntax.
I got this error, any idea?
function tag(strings, ...values){ ^^^
SyntaxError: Unexpected token ... at exports.runInThisContext (vm.js:53:16) at Module._compile (module.js:373:25) at Object.Module._extensions..js (module.js:416:10) at Module.load (module.js:343:32) at Function.Module._load (module.js:300:12) at Function.Module.runMain (module.js:441:10) at startup (node.js:139:18) at node.js:968:3
Why do we need spread operator on values but not on strings?
Why do we need spread operator on values but not on strings?
It's not strictly needed. You could have written the function also like this (which imo is more readable):
function tag(strings, dateValue, stateValue){
stateValue = dateValue < 20 ? "awake" : "sleepy"
return `${strings[0]}${dateValue}${strings[1]}${stateValue}`
}
it's just a way of grouping all the subsequent arguments into an array.
How does the function know which are values & which are strings?
Probably worth mentioning that a template handler doesn't have to return a string. It can return any JavaScript value. So you can use template handlers to implement custom DSLs to describe arbitrary structures. At ArangoDB we use a template handler for the query language to make it easier to add bound parameters to a query: https://github.com/arangodb/arangojs/blob/master/src/aql-query.js