首先了解用于将字符串转换为整数、浮点数或数字数组的方法和技巧，最后看一些简单React 、React hook和Vue.js版应用程序。
JavaScript parseInt()和parseFloat()
在JavaScript，如何将字符串转换为数字
让我们从一个简单的普通JavaScript示例开始，以演示如何将JavaScript字符串转换为数字。
回到命令行界面，创建一个convert.js的文件，打开它，并添加以下代码：
const num = Number('2020');
console.log(num);接下来，返回终端，如果在开发机器上安装了convert.js脚本，则使用node运行脚本：node convert.js
如果系统上没有安装node，还可以使用浏览器运行这个代码，只需转到DevTools，并在控制台中编写代码，然后按Enter运行它。
使用parseInt()将字符串转换为整数
JavaScript有将字符串转换为相应整数的a parseInt()方法，第一个参数是要转换的字符串，第二个参数是数字基。
返回convert.js文件，并添加以下代码：
let year = "2020";
let iyear = parseInt(year, 10);
console.log(iyear);//2020使用parseFloat()将字符串转换为Float
JavaScript有一个parseFloat()，它将字符串转换为浮点数：const pieStr = "3.14";
typeof pieStr
"string"
const pie = parseFloat(pieStr, 10);
typeof pie
"number"使用+一元运算符将字符串转换为数字
还可以在字符串转换为数字之前使用一元运算符或+，但字符串只应包含数字字符，例如：
let result = +"2020";
typeof result
"number"使用Math.floor()方法
和+一元运算符一样，Math.floor()可用于将字符串转换为整数，例如：let result = Math.floor("2020.1");
console.log(result); // 2020使用* 1
也可以将字符串乘以，将它转换为数字，这也是JavaScript中最快方法之一，它类似于+一元运算符，因为它在数字为浮点数时不执行到整数的转换。'10.0' * 1 //10 ✅
'10.20' * 1 //10.2 ✅
'10.33' * 1 //10.33 ✅
'10000' * 1 //10000 ✅
在JavaScript中还有许多其他方法可以将字符串转换为数字，例如：~~num //bitwise not
num / 1 // diving by one
num - 0 // minus 0最好的方法是什么？
许多开发人员喜欢使用Number对象，而没有new关键字(它创建一个新的JavaScript对象，而不是返回一个值)const result = Number('2020') //2020
这同样适用于浮点数。
效率
一般来说，* 1被许多开发人员报告为性能最好的，性能比其他快10倍。
将JavaScript字符串转换为数字数组
现在，让我们来看一个高级示例，该示例使用上述方法之一将JS字符串数组转换为数字。
下面这个字符串：const numbersStr = "1,2,3,4,5";
如何将此字符串转换为JS数组的相应数字？const numbersArr = numbersStr.split(',');
结果是：["1", "2", "3", "4", "5"]
接下来，我们可以遍历这个数组并将每个字符串转换为一个数字：
const numbers = numbersArr.map((n) => {
return parseInt(n, 10);
});我们也可以创建更紧凑的代码，如下所示：const nums = "1,2,3,4,5".split(',').map( n => parseInt(n, 10))
字符串被转换为一个数组，然后使用JS Array.map方法，用箭头函数映射每个值，返回字符串的等效整数。
为了提高性能并编写较短的代码，我们可以使用其他转换技巧(例如一元加运算符)将字符串转换为数字:const nums = "1,2,3,4,5".split(',').map(n => +n)
我们也可以使用Array.from方法，如下所示：var numStr = "1,2,3,4,5";
var nums = Array.from(numStr.split(','),Number);第二行简写为:var nums = Array.from(numStr.split(','),(n) => Number(n));
Vue.js中的JavaScript字符串到数字的转换
假设我们有以下JSON数据，它将从REST API返回：{"products":[{"id":1,"productName":"P01","price":"114.00"},{"id":2,"productName":"P02","price":"333.00"},{"id":3,"productName":"P03","price":"743.00"},{"id":4,"productName":"P04","price":"449.00"}]}
在我们的Vue.js或React应用程序中，我们可以使用Fetch API或HTTP客户端(如Axios)从远程服务器获取和使用这些JSON数据。然后，我们希望将产品价格转换为字符串中的数字。
下面是JavaScript函数：
const fetchProducts = () => {
axios({
method: 'GET',
url: '/api'
})
.then(response => {
this.products = response.data.products
for (let i = 0; i < this.products.length; i++) {
this.products[i].price = 1*this.products[i].price;
}
})
};
这是Vue.js应用程序：let newApp = new Vue({
el: '#app',
data: {
products: []
},
methods: {
fetchProducts: fetchProducts,
created: function() {
this.fetchProducts();
}
})将Props作为字符串而不是数字传递:React JS parseInt和parseFloat方法的挂钩示例
在使用React时，通常需要将Props传递给组件，这些组件可以通过多种方式完成，例如，使用常规的HTML路径：
还可以在传递prop时使用花括号：
这是一个简单的React组件，它使用钩子将字符串props，从父组件传递给它，然后处理值：import React from 'react';
export const TimerComponent = ({ hours = 0, minutes = 0, seconds = 0 }) => {
const [paused, setPaused] = React.useState(false);
const [finished, setFinished] = React.useState(false);
const [time, setTime] = React.useState({
hours: parseInt(hours, 10),
minutes: parseInt(minutes, 10),
seconds: parseInt(seconds, 10)
});
const tick = () => {
if (paused || finished) return;
// Time up
if (time.hours === 0 && time.minutes === 0 && time.seconds === 0) {
setFinished(true);
} else if (time.minutes === 0 && time.seconds === 0) {
setTime({
hours: time.hours - 1,
minutes: 59,
seconds: 59
});
} else if (time.seconds === 0) {
setTime({
hours: time.hours,
minutes: time.minutes - 1,
seconds: 59
});
} else {
setTime({
hours: time.hours,
minutes: time.minutes,
seconds: time.seconds - 1
});
}
};
React.useEffect(() => {
let timerID = setInterval(() => tick(), 1000);
return () => clearInterval(timerID);
});
return (
<
