I have this properties
export interface IOurFirstSpfWebPartWebPartProps {
description: string;
n1: number;
n2: number;
}
Then I have this method
public render(): void {
this.domElement.innerHTML = `
<div class="${styles.ourFirstSpfWebPart}">
<div class="${styles.container}">
<div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">
<div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
<span class="ms-font-xl ms-fontColor-white">Welcome to SharePoint!</span>
<p class="ms-font-l ms-fontColor-white">Customize SharePoint experiences using Web Parts.</p>
<p class="ms-font-l ms-fontColor-white">${this.properties.n1} + ${this.properties.n2}</p>
<a href="https://github.com/SharePoint/sp-dev-docs/wiki" class="ms-Button ${styles.button}">
<span class="ms-Button-label">Learn more</span>
</a>
</div>
</div>
</div>
</div>`;
}
However this is printing 1+2 instead of 3.
Add an extra +
, for every argument which you want to add. You need to do it like: this.sum = +this.num1 + +this.num2;
.
You answer is related to implicit coercion in javascript. Simply put, you're concatinating two strings in a template and not adding two numbers.
When you hit the {}
s in your templating syntax, your numbers will be stringified. In essence you are then adding
"1" + "2" = "12"
instead of
1 + 2 = 3
You can try two things:
${this.properties.n1 + this.properties.n2}
If that still makes "12" then
${parseInt(this.properties.n1) + parseint(this.properties.n2)}
. That will coerce both values to a number first, if it can be done.You can learn more about type coercion in the article You Don't Know JS: Types & Grammar , where it will really explain all the 'gotchas' out there about the + operator and implicit types.
The tick mark creates a template literal. I think you're looking for: ${this.properties.n1 + this.properties.n2}
—all inside the same curly braces.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
在数字前面加上 + 号
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.