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

你的答案与javascript中的隐式强制有关。简单地说，你在模板中结合两个字符串而不是添加两个数字。

当您在模板语法中点击{}时，您的数字将被字符串化。实质上，您正在添加

“1”+“2”=“12”

而不是

1 + 2 = 3

您可以尝试两件事：

将两个表达式放在{}

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

如果仍然是“12”那么

试试${parseInt(this.properties.n1) + parseint(this.properties.n2)}。如果可以的话，那将首先将两个值强制转换为数字。

您可以在文章 You Don't Know JS: Types & Grammar 中了解有关类型强制的更多信息，它将真正解释有关+运算符和隐式类型的所有'陷阱'。

Answer 2

为要添加的每个参数添加额外+ 你需要像下面这样做：

<code>
    this.sum =  +this.num1  +   +this.num2;
</code>

Answer 3

刻度线创建模板文字。我想你正在寻找： ${this.properties.n1 + this.properties.n2} - 全部在同一个花括号内。

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

Answer 4

在数字前加上+号

如何在打字稿中加2个数字

4 个答案: