這個問題是關于ts行內文本插值（不是 HTML 檔案的模板插值）。
我找不到關于我的問題的相關資訊，所以我不確定這是否可能，如果您在我所要求的問題無法完成的情況下提供源檔案，我們將不勝感激。
目前我可以執行以下操作：
export class SomeClass {
parseString(name: string): string {
const baseString = `
Hello ${name}...
`;
return baseString;
}
}
// later... when `parseString` is called I get the following result:
parseString('John'); // Hello John...
parseString('Mr. Smith'); // Hello Mr. Smith...
我想做的是類似的事情：
export class SomeClass {
parseString(name: string, baseString: string): string {
return baseString;
}
}
// later... when `parseString` is called I want to get the following result:
parseString('John', `Hello Mr.${name}`); // Hello Mr.John...
parseString('Mr. Smith', `Hi ${name}`); // Hi Mr. Smith...
我提議的語法是完全錯誤的，因為在其范圍內甚至存在或具有值baseString之前就進行了評估name，因此它總是回傳沒有變數值的字串：Hello Mr.和Hi 。
我不關心語法，任何利用變數文本插值的方法都會很棒。最終我希望能夠做這樣的事情：
/**
* The reason that I'm using `of` from `RxJS` is that
* I want to show that I want to be able to gather labels from
* anywhere, let's say a REST API or a service (?)
**/
of(`Greetings ${name}...`).subscribe(val => {
const name = 'John';
console.log(val); // Greetings John...
});
目前，為了實作這一切，我只使用：
parseString(name: string, baseString: string): string {
return baseString.replace(/\$\{name\}/g, 'John');
}
但我想知道文本插值是否有我缺少的功能。
編輯：
這個問題和建議的重復之間的主要區別在于，建議不關心反引號文本是否可能是動態的，在這里我試圖能夠從頭開始或基于其他變數“創建”那些反引號字串。
編輯2：
建議的副本確實在這里回答了我的問題，但僅適用于ES6環境。
編輯3：
簡單解釋一下，這個ES5/ES6問題。我意識到建議的重復問題Function在運行時創建了一個物件，語法僅在 中可用ES6，這意味著它只能在ES6環境中使用。ES5其他問題/答案不支持。相反，Angular TypeScript 編譯器可以創建與ES5使用文本插值時兼容的代碼。
uj5u.com熱心網友回復：
嘗試這個
/**
* Text interpolation
* https://www.w3schools.com/js/js_string_templates.asp
*
* Example:
* const text: string = this.helloI18nTag; // <-- "Hello ${name}, welcome"
* const res = StringUtil.interpolate(text, { name: 'John Connor' });
* console.log(res); // <-- "Hello John Connor, welcome"
*
* @param template : string to interpolate
* @param args : an object wiht key -> value to replace
* @returns
*/
public static interpolate(template: string, args: { [key: string]: string }): string {
if (typeof args !== 'object') {
return template;
}
try {
return new Function('return `' template.replace(/\$\{(. ?)\}/g, '${this.$1}') '`;').call(args);
} catch (e) {
// ES6 syntax not supported
}
Object.keys(args).forEach((key) => {
template = template.replace(new RegExp('\\$\\{' key '\\}', 'g'), args[key]);
});
return template;
}
interpolate('Hello ${name}', {name: 'John'});
uj5u.com熱心網友回復：
如果您所做的只是連接baseStringand name，則可以執行以下操作：
parseString(name: string, baseString: string): string {
return baseString name;
}
或者，如果它不會總是那么簡單，您可以傳遞一個函式而不是baseString：
// inside class
parseString(name: string, greeting: (s: string) => string): string {
return greeting(name);
}
function makeGreeting(name: string) {
return `Hi ${name}, I’m Jack.`;
}
console.log(parseString("Bill", makeGreeting)); // “Hi Bill, I’m Jack.”
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/367564.html
標籤：有角的 打字稿 ecmascript-5 角度模板
上一篇：無法在AndroidJava應用程式中讀取BuildConfig.variable
下一篇：帶有時間比較的SQL查詢