TemplateLiterals

Template Literals are a great JavaScript feature introduced in ES2015/ES6.

They allow you to build multiline strings with interpolated values, and make it easy to handle single and double quotes embedded in your strings.

This sample shows how you can use Wijmo's glbz tag function to add formatting and internationalization to template literals.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import { glbz } from '@grapecity/wijmo'; document.readyState === 'complete' ? init() : window.onload = init; function init() { // show first result document.getElementById('btn1').addEventListener('click', () => { document.getElementById('result1').textContent = glbz `Today is‌ ${new Date()}:d, and PI is‌ ${Math.PI}:n4.`; }); // show second result document.getElementById('btn2').addEventListener('click', () => { document.getElementById('result2').textContent = glbz `Today is ${new Date()}:'dddd, MMMM dd'.`; }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Globalization/Template Literals</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <p> Click the button below to evaluate this template literal using Wijmo's <b>glbz</b> tag function that formats numbers and dates using Wijmo's <b>Globalize</b> class: </p> <pre>glbz`Today is $‌&zwnj;{new Date()}:d, and PI is $‌&zwnj;{Math.PI}:n4.`</pre> <button id="btn1" class="btn btn-default"> Show Result </button> <pre id="result1"></pre> <p> This example shows how you can use quoted format strings for dates and times: </p> <pre>glbz`Today is $&zwnj;{new Date()}:'dddd, MMMM dd'.`</pre> <button id="btn2" class="btn btn-default"> Show Result </button> <pre id="result2"></pre> </div> </body> </html> import 'bootstrap.css'; import { Component, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { glbz } from '@grapecity/wijmo'; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { result1 = ''; format1() { this.result1 = glbz`Today is‌ ${new Date()}:d, and PI is‌ ${Math.PI}:n4.`; } result2 = ''; format2() { this.result2 = glbz`Today is ${new Date()}:'dddd, MMMM dd'.`; } } @NgModule({ imports: [BrowserModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Globalization/Template Literals</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <p> Click the button below to evaluate this template literal using Wijmo's <b>glbz</b> tag function that formats numbers and dates using Wijmo's <b>Globalize</b> class: </p> <pre>glbz&#96;Today is &#36;{{'{'}}new Date()}:d, and PI is &#36;{{'{'}}Math.PI}:n4.&#96;</pre> <button id="btn1" class="btn btn-default" (click)="format1()"> Show Result </button> <pre id="result1">{{result1}}</pre> <p> This example shows how you can use quoted format strings for dates and times: </p> <pre>glbz&#96;Today is &#36;{{'{'}}new Date()}:'dddd, MMMM dd'.&#96;</pre> <button id="btn2" class="btn btn-default" (click)="format2()"> Show Result </button> <pre id="result2">{{result2}}</pre> </div> <template> <div class="container-fluid"> <p> Click the button below to evaluate this template literal using Wijmo's <b>glbz</b> tag function that formats numbers and dates using Wijmo's <b>Globalize</b> class: </p> <pre>glbz\`Today is $‌\{new Date()}:d, and PI is $‌\{Math.PI}:n4.\`</pre> <button id="btn1" class="btn btn-default" @click="format1"> Show Result </button> <pre id="result1">{{result1}}</pre> <p> This example shows how you can use quoted format strings for dates and times: </p> <pre>glbz\`Today is‌ $\{new Date()}:'dddd, MMMM dd'.\`</pre> <button id="btn2" class="btn btn-default" @click="format2"> Show Result </button> <pre id="result2">{{result2}}</pre> </div> </template> <script> import "bootstrap.css"; import Vue from "vue"; import { glbz } from '@grapecity/wijmo'; let App = Vue.extend({ name: "app", data: function() { return { result1: '', result2: '' }; }, methods: { format1: function() { this.result1 = glbz`Today is ${new Date()}:d, and PI is ${Math.PI}:n4.`; }, format2: function() { this.result2 = glbz`Today is‌ ${new Date()}:'dddd, MMMM dd'.`; } } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Globalization/Template Literals</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"> </div> </body> </html> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { glbz } from '@grapecity/wijmo'; class App extends React.Component { constructor(props) { super(props); this.format1 = () => { this.setState({ result1: glbz `Today is ${new Date()}:d, and PI is ${Math.PI}:n4.` }); }; this.format2 = () => { this.setState({ result2: glbz `Today is‌ ${new Date()}:'dddd, MMMM dd'.` }); }; this.state = { result1: '', result2: '' }; } render() { return <div className="container-fluid"> <p>Click the button below to evaluate this template literal using Wijmo's <b>glbz</b> tag function that formats numbers and dates using Wijmo's <b>Globalize</b> class: </p> <pre>glbz`Today is $‌{'{'}new Date()}:d, and PI is $‌{'{'}Math.PI}:n4.`</pre> <button id="btn1" className="btn btn-default" onClick={this.format1}> Show Result </button> <pre id="result1">{this.state.result1}</pre> <p> This example shows how you can use quoted format strings for dates and times: </p> <pre>glbz`Today is‌ ${'{'}new Date()}:'dddd, MMMM dd'.\`</pre> <button id="btn2" className="btn btn-default" onClick={this.format2}> Show Result </button> <pre id="result2">{this.state.result2}</pre> </div>; } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AutoComplete</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html>