如何在打字稿中對2個數字求和

Question

我有這個屬性

export interface IOurFirstSpfWebPartWebPartProps {
  description: string;
  n1: number;
  n2: number;

}

然后我有這個方法

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>`;
  }

然而，這是打印 1+2 而不是 3。

Answer 1

為您要添加的每個參數添加一個額外的+ 。 你需要這樣做： this.sum = +this.num1 + +this.num2; .

Answer 2

您的回答與 javascript 中的隱式強制有關。 簡而言之，您是在模板中連接兩個字符串，而不是將兩個數字相加。

當您在模板語法中點擊{} ，您的數字將被字符串化。 本質上，您然后添加

“1”+“2”=“12”

代替

1 + 2 = 3

您可以嘗試兩件事：

1. 將兩個表達式放在 {} 中

${this.properties.n1 + this.properties.n2}

如果那仍然是“12”，那么

2. 試試${parseInt(this.properties.n1) + parseint(this.properties.n2)} 。 如果可以的話，這將首先將兩個值強制為一個數字。

你可以在你不知道的 JS：類型和語法一文中了解更多關於類型強制的信息，它會真正解釋所有關於 + 運算符和隱式類型的“陷阱”。

Answer 3

刻度線創建模板文字。 我認為您正在尋找： ${this.properties.n1 + this.properties.n2} — 都在同一個花括號內。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Answer 4

在數字前面加上 + 號