ES6+ for React
  • Introduction
  • Introduction
    • Introduction
  • Statements and declarations
    • let
    • const
    • class
    • import
    • export
  • Standard built-in objects
    • Arrow functions
    • Template literals
    • Array.prototype.map()
    • Computed property names
  • Expressions and operators
    • Spread operator
    • Destructuring assignment
    • Logical Operators
Powered by GitBook
On this page
  • Defination
  • Syntax
  • Examples
  • Usage
  • References

Was this helpful?

  1. Standard built-in objects

Template literals

Defination

Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them. They were called "template strings" in prior editions of the ES2015 specification.

Syntax

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tag `string text ${expression} string text`

Examples

console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"
var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

Usage

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <ul>
      <li>
        <Link to={`${match.url}/rendering`}>
          Rendering with React
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/components`}>
          Components
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/props-v-state`}>
          Props v. State
        </Link>
      </li>
    </ul>

    <Route path={`${match.url}/:topicId`} component={Topic}/>
    <Route exact path={match.url} render={() => (
      <h3>Please select a topic.</h3>
    )}/>
  </div>
)

References

PreviousArrow functionsNextArray.prototype.map()

Last updated 4 years ago

Was this helpful?

Example from .

react-router
MDN Template literals