10_STRING INTERPOLATION CONCEPTS
- String interpolation (or variable interpolation, variable substitution, or variable expansion) is the process of evaluating : a string literal containing one or more placeholders, yielding a result in which the placeholders are replaced with their corresponding values.
- Strings in JavaScript have been historically limited, lacking the capabilities one might expect coming from languages like Python or Ruby. ES6 Template Strings (available in Chrome 41+), fundamentally change that. They introduce a way to define strings with domain-specific languages (DSLs), bringing better:
- String interpolation
- Embedded expressions
- Multiline strings without hacks
- String formatting
- String tagging for safe HTML escaping, localization and more.
- Template Strings use back-ticks (
``) rather than the single or double quotes we're used to with regular strings. A template string could thus be written as follows:
var greeting = `Yo World!`;
So far, Template Strings haven't given us anything more than normal strings do.Let’s change that.
String Substitution
- One of their first real benefits is string substitution. Substitution allows us to take any valid JavaScript expression (including say, the addition of variables) and inside a Template Literal, the result will be output as part of the same string.
- Template Strings can contain placeholders for string substitution using the
${ }syntax, as demonstrated below:
// Simple string substitutionvar name = "Brendan";console.log(`Yo, ${name}!`);// => "Yo, Brendan!"
- As all string substitutions in Template Strings are JavaScript expressions, we can substitute a lot more than variable names. For example, below we can use expression interpolation to embed for some readable inline math:
var a = 10;var b = 10;console.log(`JavaScript first appeared ${a+b} years ago. Crazy!`);//=> JavaScript first appeared 20 years ago. Crazy!console.log(`The number of JS MVC frameworks is ${2 * (a + b)} and not ${10 * (a + b)}.`);//=> The number of JS frameworks is 40 and not 200.
They are also very useful for functions inside expressions:
function fn() { return "I am a result. Rarr"; }console.log(`foo ${fn()} bar`);//=> foo I am a result. Rarr bar.
The
${} works fine with any kind of expression, including member expressions and method calls:var user = {name: 'Caitlin Potter'};console.log(`Thanks for getting this into V8, ${user.name.toUpperCase()}.`);// => "Thanks for getting this into V8, CAITLIN POTTER";// And another examplevar thing = 'drugs';console.log(`Say no to ${thing}. Although if you're talking to ${thing} you may already be on ${thing}.`);// => Say no to drugs. Although if you're talking to drugs you may already be on drugs.
If you require backticks inside of your string, it can be escaped using the backslash character
\ as follows:var greeting = `\`Yo\` World!`;
Multiline Strings
- Multiline strings in JavaScript have required hacky workarounds for some time. Current solutions for them require that strings either exist on a single line or be split into multiline strings using a
\(backslash) before each newline. For example:
var greeting = "Yo \World";
- Whilst this should work fine in most modern JavaScript engines, the behavior itself is still a bit of a hack. One can also use string concatenation to fake multiline support, but this equally leaves something to be desired:
var greeting = "Yo " +"World";
- Template Strings significantly simplify multiline strings. Simply include newlines where they are needed and BOOM. Here's an example:
- Any whitespace inside of the backtick syntax will also be considered part of the string.
console.log(`string text line 1string text line 2`);
solve this question ???
<script>
let y = 2;
function abc() {
console.log(y);
var y = 1;
}
abc();
</script> // hoisitng concepts applies!!!
Comments
Post a Comment