Vue3中怎么把字符串转换为number|极客教程

Vue3中怎么把字符串转换为number

在Vue3中，我们经常会遇到需要将字符串转换为数字的场景，比如用户输入的内容是以字符串的形式传递给后台接口或者进行数值计算等。在JavaScript中，可以使用Number函数或者parseInt函数来将字符串转换为数字。在Vue3中，同样可以使用这两种方法来实现。

使用Number函数将字符串转换为数字

Number 函数是JavaScript中的一个全局对象，可以将任意类型的数据转换为数字。在Vue3中，我们可以通过在模板中直接使用 Number 函数将字符串转换为数字。

<template>
  <div>
    <p>Age: {{ age }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: Number("25")
    };
  }
};
</script>

在上面的代码中，我们将字符串"25"通过Number函数转换为数字，并将结果赋值给age。

使用parseInt函数将字符串转换为数字

parseInt 函数是JavaScript中的全局对象，可以将一个字符串解析成整数。它常用于将带有数字的字符串转换为整数，当然也可以将以其他进制表示的数字字符串转换为整数。

<template>
  <div>
    <p>Price: {{ price }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: parseInt("100.50")
    };
  }
};
</script>

在上面的代码中，我们将字符串"100.50"通过parseInt函数转换为数字，并将结果赋值给price。

使用加号运算符将字符串转换为数字

除了上述两种方法，我们还可以使用加号运算符将字符串转换为数字。当字符串内容为纯数字时，加号运算符会将其转换为数字，如果内容不是纯数字，则会返回NaN。

<template>
  <div>
    <p>Quantity: {{ quantity }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      quantity: +"50"
    };
  }
};
</script>

在上面的代码中，我们将字符串"50"通过加号运算符转换为数字，并将结果赋值给quantity。