let a = '266748207301.75' console.log( Number(a) / 10000000000000000.toFixed(2))为什么报错
时间: 2024-09-14 08:16:02 浏览: 32
在JavaScript中,使用 `Number` 对象的 `toFixed()` 方法可以将数字转换为字符串,并保留指定位数的小数。然而,当你尝试对数字进行运算后再使用 `toFixed()` 方法时,会遇到问题。这是因为在JavaScript中,`toFixed()` 是字符串的方法,而不是数字的方法。
在你的代码中,`Number(a) / 10000000000000000.toFixed(2)` 这段代码中,`Number(a)` 首先将字符串 `'266748207301.75'` 转换成数字,然后除以 `10000000000000000`,结果是一个非常大的数字。这个数字在被转换成字符串之前,你尝试调用 `toFixed(2)` 方法。由于数字本身不能直接使用 `toFixed()`,JavaScript引擎会尝试将数字转换为字符串后再调用 `toFixed()` 方法,但这个转换发生在执行除法之后,因此会产生错误。
要修正这个问题,你需要先执行除法,然后将结果转换成字符串,最后调用 `toFixed()` 方法。例如:
```javascript
let a = '266748207301.75';
console.log((Number(a) / 10000000000000000).toString().toFixed(2));
```
这样,数字会先被转换成字符串,然后 `toFixed(2)` 方法被成功调用,并返回一个带有两位小数的字符串。
相关问题
<template> <div class="hello"> <h1>子任务五:用折柱展示省份平均消费额和地区平均消费额</h1> <div id="chart" style="height: 800px;width: 1600px;"></div> </div> </template> <script> import { onMounted } from 'vue'; import * as echarts from "../src/assets/echarts.min"; import axios from 'axios'; export default{ setup(){ onMounted(()=>{ axios({ method:"post", url:'/api/dataVisualization/selectOrderInfo', data:{ "startTime":"2020-01-01 00:00:00", "endTime":"2020-12-30 00:00:00" } }).then((res)=>{ let da = res.data.data; console.log(da) var nationMap = new Map(); var aderrsMap = new Map(); da.forEach((e)=>{ if(!nationMap.has(e.provinceName)){ nationMap.set(e.provinceName,Number(e.finalTotalAmount/12)) }else{ let sum1 = nationMap.get(e.provinceName) +Number(e.finalTotalAmount/12); nationMap.set(e.provinceName,sum1); } }); da.forEach((e)=>{ if(!aderrsMap.has(e.regionName)){ aderrsMap.set(e.regionName,Number(e.finalTotalAmount/12)) }else{ let sum1 = aderrsMap.get(e.regionName) + Number(e.finalTotalAmount/12); aderrsMap.set(e.regionName,sum1); } }); let arr1 = Array.from(aderrsMap); let sortedArr1 = arr1.sort(function(c,d){ return d[1] - c[1]; }); let arr = Array.from(nationMap); let sortedArr = arr.sort(function(a,b){ return b[1] - a[1]; }); var top_name = []; var top_data = []; sortedArr.slice(0,5).forEach((res)=>{ top_name.push(res[0]); top_data.push(parseFloat(res[1]).toFixed(2)); }); var avg_name = []; var avg_data = []; sortedArr1.slice(0,5).forEach((res)=>{ avg_name.push(res[0]); avg_data.push(parseFloat(res[1]).toFixed(2)); }); var chartDom = document.getElementById("chart"); var myChart = echarts.init(chartDom); const option={ xAxis:[{ type:"category", data:top_name, name:"省份", },{ data:avg_name, name:"地区", } ], yAxis:{ type:"value", name:"平均消费额", }, series:[{ type:"bar", data:top_data, },{ type:"line", data:avg_data, } ] }; console.log(top_name); console.log(top_data); console.log(avg_name); console.log(avg_data); option && myChart.setOption(option,true); }).catch((err)=>{ console.log(err); }) }) } } </script>对每行代码的作用做出详细的注释,并且表明这段代码为什么要这么写
当对每行代码进行详细注释时,请注意以下内容:
```javascript
<template>
<div class="hello">
<h1>子任务五:用折柱展示省份平均消费额和地区平均消费额</h1>
<div id="chart" style="height: 800px;width: 1600px;"></div>
</div>
</template>
<script>
import { onMounted } from 'vue';
import * as echarts from "../src/assets/echarts.min";
import axios from 'axios';
export default {
setup() {
onMounted(() => {
axios({
method: "post",
url: '/api/dataVisualization/selectOrderInfo',
data: {
"startTime": "2020-01-01 00:00:00",
"endTime": "2020-12-30 00:00:00"
}
}).then((res) => {
let da = res.data.data; // 获取请求返回的数据
console.log(da);
// 创建一个 Map 对象用于存储各省份的消费额
var nationMap = new Map();
// 创建一个 Map 对象用于存储各地区的消费额
var aderrsMap = new Map();
// 遍历数据,计算各省份的平均消费额并存储到 nationMap 中
da.forEach((e) => {
if (!nationMap.has(e.provinceName)) {
nationMap.set(e.provinceName, Number(e.finalTotalAmount / 12));
} else {
let sum1 = nationMap.get(e.provinceName) + Number(e.finalTotalAmount / 12);
nationMap.set(e.provinceName, sum1);
}
});
// 遍历数据,计算各地区的平均消费额并存储到 aderrsMap 中
da.forEach((e) => {
if (!aderrsMap.has(e.regionName)) {
aderrsMap.set(e.regionName, Number(e.finalTotalAmount / 12));
} else {
let sum1 = aderrsMap.get(e.regionName) + Number(e.finalTotalAmount / 12);
aderrsMap.set(e.regionName, sum1);
}
});
// 将 aderrsMap 转换为数组并按照消费额降序排序
let arr1 = Array.from(aderrsMap);
let sortedArr1 = arr1.sort(function(c, d) {
return d[1] - c[1];
});
// 将 nationMap 转换为数组并按照消费额降序排序
let arr = Array.from(nationMap);
let sortedArr = arr.sort(function(a, b) {
return b[1] - a[1];
});
// 获取消费额前五名的省份名称和对应的平均消费额
var top_name = [];
var top_data = [];
sortedArr.slice(0, 5).forEach((res) => {
top_name.push(res[0]);
top_data.push(parseFloat(res[1]).toFixed(2));
});
// 获取消费额前五名的地区名称和对应的平均消费额
var avg_name = [];
var avg_data = [];
sortedArr1.slice(0, 5).forEach((res) => {
avg_name.push(res[0]);
avg_data.push(parseFloat(res[1]).toFixed(2));
});
var chartDom = document.getElementById("chart");
var myChart = echarts.init(chartDom);
// 配置图表的 x 轴、y 轴和系列数据
const option = {
xAxis: [{
type: "category",
data: top_name,
name: "省份",
},
{
data: avg_name,
name: "地区",
}
],
yAxis: {
type: "value",
name: "平均消费额",
},
series: [{
type: "bar",
data: top_data,
},
{
type: "line",
data: avg_data,
}
]
};
console.log(top_name);
console.log(top_data);
console.log(avg_name);
console.log(avg_data);
// 渲染图表
option && myChart.setOption(option, true);
}).catch((err) => {
console.log(err);
})
})
}
}
</script>
```
在上面的代码注释中,我对每行代码进行了详细的描述,并指明了它们的作用和原因。如果你对其中任何一行代码有疑问,请随时提问!
优化带码:<Item label={val.i_title} name={val.name} rules={[ ({ getFieldValue }) => ({ validator (_, value) { let { companyList, personList } = form.current.getFieldsValue(['companyList', 'personList']) let totalPercent = 0; //总比例 let percent = 0; //比例 let arr = [...companyList, ...personList].filter((c) => c.percent) let _allempty = true for (let i = 0; i < arr.length; i++) { for(let key in arr[i]) { if (key !== 'cardNoType' && arr[i][key]) { _allempty = false break } } if (!_allempty) { break } } if (_allempty) { return Promise.reject(new Error('请至少填写一条股东信息')) } arr.forEach((c) => { percent = c.percent ? parseFloat(c.percent) : 0 totalPercent += percent }) if (toFixed(totalPercent) * 1 !== 100) { return Promise.reject(new Error('股权比例精确到小数点后两位且总和等于100')); } console.log(companyList, personList); return Promise.resolve(); }, }), ]} labelAlign={val.labelAlign} > <ShareholdersInformation form={form} {...val.attrs}/> </Item>
这段代码中存在一些可以优化的地方:
1. 在循环中使用了一个变量 `_allempty` 来判断是否所有股东信息都为空,但是循环过程中没有对其进行更新,导致在第一次循环中就确定了其值,后面的循环就不会再更新。可以将其移动到循环内部,每次判断时重新赋值。
2. 在计算股权比例时,可以使用 reduce 方法简化计算过程。
3. 在计算股权比例时,使用了 `toFixed` 方法将结果转换成字符串,然后再乘以 1 转换回数字类型,这个过程可以使用 `Number` 函数代替。
优化后的代码如下:
```
<Item
label={val.i_title}
name={val.name}
rules={[
{
validator(_, value) {
const { companyList, personList } = form.current.getFieldsValue([
'companyList',
'personList',
]);
let totalPercent = 0; //总比例
let arr = [...companyList, ...personList].filter((c) => c.percent);
let allempty = true;
for (let i = 0; i < arr.length; i++) {
let empty = true;
for (let key in arr[i]) {
if (key !== 'cardNoType' && arr[i][key]) {
empty = false;
allempty = false;
break;
}
}
if (!empty) {
break;
}
}
if (allempty) {
return Promise.reject(new Error('请至少填写一条股东信息'));
}
totalPercent = arr.reduce((prev, cur) => prev + Number(cur.percent), 0);
if (totalPercent.toFixed(2) * 1 !== 100) {
return Promise.reject(new Error('股权比例精确到小数点后两位且总和等于100'));
}
console.log(companyList, personList);
return Promise.resolve();
},
},
]}
labelAlign={val.labelAlign}
>
<ShareholdersInformation form={form} {...val.attrs} />
</Item>
```
阅读全文