テンプレート文字列

テンプレート文字列は、ES2015(ES6)で導入された優れたJavaScript機能です。

テンプレート文字列は、値を含む複数行の文字列を構築することを可能にし、文字列に一重引用符と二重引用符を埋め込みやすくします。

このサンプルは、WijmoのGlobalizeクラスを使用して、書式設定と国際化をテンプレート文字列に追加する方法を示します。

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 `今日の日付: ${new Date()}:d、πの値: ${Math.PI}:n4`; }); // show second result document.getElementById('btn2').addEventListener('click', () => { document.getElementById('result2').textContent = i18n `今日の日付: ${new Date()}:d、現在時刻: ${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> 下のボタンをクリックして、Wijmoの<b>Globalize</b>クラスを使用して数字と日付を書式設定する<b>i18n</b>タグ関数を使用して、このテンプレート文字列を評価します。 </p> <pre> i18n`今日の日付: $‌&zwnj;{new Date()}:d、πの値: $‌&zwnj;{Math.PI}:n4`</pre> <button id="btn1" class="btn btn-default"> 結果を表示 </button> <pre id="result1"></pre> <p> この例は、時刻を書式設定する方法を示しています。 </p> <pre> i18n`今日の日付: $&zwnj;{new Date()}:d、現在時刻: $&zwnj;{new Date()}:T`</pre> <button id="btn2" class="btn btn-default"> 結果を表示 </button> <pre id="result2"></pre> </div> </body> </html> import { Globalize } from '@grapecity/wijmo'; // Tag function for use with template literals. // It interprets strings starting with ':' and following interpolated values as format strings, e.g. // `this is the number: ${theNumber}:n2!` export function i18n(...args) { let result = []; args[0].forEach((part, index) => { if (index > 0) { let val = args[index]; let match = part.match(/:([a-z][0-9]*)/i) || part.match(/:'(.+)'/); if (match) { let fmt = match[1]; val = Globalize.format(val, fmt); part = part.substr(match[0].length); } result.push(val); // push formatted interpolation } result.push(part); // push string part }); return result.join(''); // return the result as a string } 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`今日の日付: ${new Date()}:d、πの値: ${Math.PI}:n4`; } result2 = ''; format2() { this.result2 = i18n`今日の日付: ${new Date()}:d、現在時刻: ${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> 下のボタンをクリックして、Wijmoの<b>Globalize</b>クラスを使用して数字と日付を書式設定する<b>i18n</b>タグ関数を使用して、このテンプレート文字列を評価します。 </p> <pre> i18n&#96;今日の日付: &#36;{{'{'}}new Date()}:d、πの値: &#36;{{'{'}}Math.PI}:n4&#96;</pre> <button id="btn1" class="btn btn-default" (click)="format1()"> 結果を表示 </button> <pre id="result1">{{result1}}</pre> <p> この例は、時刻を書式設定する方法を示しています。 </p> <pre> i18n&#96;今日の日付: &#36;{{'{'}}new Date()}:d、現在時刻: &#36;{{'{'}}new Date()}:T&#96;</pre> <button id="btn2" class="btn btn-default" (click)="format2()"> 結果を表示 </button> <pre id="result2">{{result2}}</pre> </div> import { Globalize } from '@grapecity/wijmo'; // Tag function for use with template literals. // It interprets strings starting with ':' and following interpolated values as format strings, e.g. // `this is the number: ${theNumber}:n2!` export function i18n(...args: any[]) { let result: string[] = []; args[0].forEach((part: string, index: number) => { if (index > 0) { let val = args[index]; let match = part.match(/:([a-z][0-9]*)/i) || part.match(/:'(.+)'/); if (match) { let fmt = match[1]; val = Globalize.format(val, fmt); part = part.substr(match[0].length); } result.push(val); // push formatted interpolation } result.push(part); // push string part }); return result.join(''); // return the result as a string } 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 `今日の日付: ${new Date()}:d、πの値: ${Math.PI}:n4` }); }; this.format2 = () => { this.setState({ result2: i18n `今日の日付: ${new Date()}:d、現在時刻: ${new Date()}:T` }); }; this.state = { result1: '', result2: '' }; } render() { return <div className="container-fluid"> <p>下のボタンをクリックして、Wijmoの<b>Globalize</b>クラスを使用して数字と日付を書式設定する<b>i18n</b>タグ関数を使用して、このテンプレート文字列を評価します。 </p> <pre>i18n`今日の日付: $‌{'{'}new Date()}:d、πの値: $‌{'{'}Math.PI}:n4`</pre> <button id="btn1" className="btn btn-default" onClick={this.format1}> 結果を表示 </button> <pre id="result1">{this.state.result1}</pre> <p> この例は、時刻を書式設定する方法を示しています。 </p> <pre>i18n`今日の日付:‌ ${'{'}new Date()}:d、現在時刻: ${'{'}new Date()}:T`</pre> <button id="btn2" className="btn btn-default" onClick={this.format2}> 結果を表示 </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> import { Globalize } from '@grapecity/wijmo'; // Tag function for use with template literals. // It interprets strings starting with ':' and following interpolated values as format strings, e.g. // `this is the number: ${theNumber}:n2!` export function i18n(...args) { let result = []; args[0].forEach((part, index) => { if (index > 0) { let val = args[index]; let match = part.match(/:([a-z][0-9]*)/i) || part.match(/:'(.+)'/); if (match) { let fmt = match[1]; val = Globalize.format(val, fmt); part = part.substr(match[0].length); } result.push(val); // push formatted interpolation } result.push(part); // push string part }); return result.join(''); // return the result as a string } <template> <div class="container-fluid"> <p> 下のボタンをクリックして、Wijmoの<b>Globalize</b>クラスを使用して数字と日付を書式設定する<b>i18n</b>タグ関数を使用して、このテンプレート文字列を評価します。 </p> <pre> i18n\`今日の日付: $‌\{new Date()}:d、πの値: $‌\{Math.PI}:n4\`</pre> <button id="btn1" class="btn btn-default" @click="format1"> 結果を表示 </button> <pre id="result1">{{result1}}</pre> <p> この例は、時刻を書式設定する方法を示しています。 </p> <pre> i18n\`今日の日付:‌ $\{new Date()}:d、現在時刻: $\{new Date()}:T\`</pre> <button id="btn2" class="btn btn-default" @click="format2"> 結果を表示 </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`今日の日付: ${new Date()}:d、πの値: ${Math.PI}:n4`; }, format2: function() { this.result2 = i18n`今日の日付: ${new Date()}:d、現在時刻: ${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 { Globalize } from '@grapecity/wijmo'; // Tag function for use with template literals. // It interprets strings starting with ':' and following interpolated values as format strings, e.g. // `this is the number: ${theNumber}:n2!` export function i18n(...args) { let result = []; args[0].forEach((part, index) => { if (index > 0) { let val = args[index]; let match = part.match(/:([a-z][0-9]*)/i) || part.match(/:'(.+)'/); if (match) { let fmt = match[1]; val = Globalize.format(val, fmt); part = part.substr(match[0].length); } result.push(val); // push formatted interpolation } result.push(part); // push string part }); return result.join(''); // return the result as a string }