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 Globalize class to add formatting and internationalization to template literals.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import { i18n } from './i18n'; document.readyState === 'complete' ? init() : window.onload = init; function init() { // show first result document.getElementById('btn1').addEventListener('click', () => { document.getElementById('result1').textContent = i18n `Today is‌ ${new Date()}:d, and PI is‌ ${Math.PI}:n4.`; }); // show second result document.getElementById('btn2').addEventListener('click', () => { document.getElementById('result2').textContent = i18n `Today is‌ ${new Date()}:d, and it's ${new Date()}:T.`; }); } <!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 a <b>i18n</b> tag function that formats numbers and dates using Wijmo's <b>Globalize</b> class: </p> <pre> i18n`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 format times: </p> <pre> i18n`Today is‌ $&zwnj;{new Date()}:d, and it's $&zwnj;{new Date()}:T.`</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 { i18n } from './i18n'; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { result1 = ''; format1() { this.result1 = i18n`Today is‌ ${new Date()}:d, and PI is‌ ${Math.PI}:n4.`; } result2 = ''; format2() { this.result2 = i18n`Today is‌ ${new Date()}:d, and it's ${new Date()}:T.`; } } @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 a <b>i18n</b> tag function that formats numbers and dates using Wijmo's <b>Globalize</b> class: </p> <pre> i18n&#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 format times: </p> <pre> i18n&#96;Today is &#36;{{'{'}}new Date()}:d, and it's &#36;{{'{'}}new Date()}:T.&#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 a <b>i18n</b> tag function that formats numbers and dates using Wijmo's <b>Globalize</b> class: </p> <pre> i18n\`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 format times: </p> <pre> i18n\`Today is‌ $\{new Date()}:d, and it's $\{new Date()}:T.\`</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 { i18n } from './i18n'; let App = Vue.extend({ name: "app", data: function() { return { result1: '', result2: '' }; }, methods: { format1: function() { this.result1 = i18n`Today is ${new Date()}:d, and PI is ${Math.PI}:n4.`; }, format2: function() { this.result2 = i18n`Today is‌ ${new Date()}:d, and it's ${new Date()}:T.`; } } }); 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 { i18n } from './i18n'; class App extends React.Component { constructor(props) { super(props); this.format1 = () => { this.setState({ result1: i18n `Today is ${new Date()}:d, and PI is ${Math.PI}:n4.` }); }; this.format2 = () => { this.setState({ result2: i18n `Today is‌ ${new Date()}:d, and it's ${new Date()}:T.` }); }; this.state = { result1: '', result2: '' }; } render() { return <div className="container-fluid"> <p>Click the button below to evaluate this template literal usinga <b>i18n</b> tag function that formats numbers and dates using Wijmo's <b>Globalize</b> class: </p> <pre>i18n`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 format times: </p> <pre>i18n`Today is‌ ${'{'}new Date()}:d, and it's ${'{'}new Date()}:T.\`</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>