vue 百分值与数值之间转换
-
方法一:
let topValue = Number(this.optionModel.grid[i].top);
- 是尝试把整个字符串转换为数字,包括百分号。如果字符串不能被解析为有效的数字,那么结果将是
NaN
,在这种情况下,你可能需要添加错误处理代码来处理这种情况 - 如果是 40% 值的话可以转成 0.4,但若是 '40%' 的字符串是无法转换的,因为带 % 会被视为非数字字符
- 是尝试把整个字符串转换为数字,包括百分号。如果字符串不能被解析为有效的数字,那么结果将是
-
方法二:
let topValue = parseInt(this.optionModel.grid[i].top, 10);
- 该函数在解析字符串时会尝试从字符串的开头开始解析整数,直到遇到第一个非数字字符为止。如果字符串的开头是数字,那么它会解析这一部分,并将其转换为整数。如果字符串的开头不是数字,
parseInt
会返回NaN
(Not a Number) - 在
parseInt(this.optionModel.grid[i].top, 10)
函数中,10 是基数,它指定了数字系统的基数。在这种情况下,它是十进制,意味着parseInt
函数将把字符串解析为十进制数字。如果省略基数,那么默认情况下,parseInt
会根据字符串的开头来决定基数:如果字符串以 "0x" 或 "0X" 开头,那么基数是 16(十六进制);如果字符串以 "0" 开头,那么基数是 8(八进制);否则,基数是 10(十进制)
- 该函数在解析字符串时会尝试从字符串的开头开始解析整数,直到遇到第一个非数字字符为止。如果字符串的开头是数字,那么它会解析这一部分,并将其转换为整数。如果字符串的开头不是数字,
-
都不行的话就是先去掉百分号再使用上述方法,或者别的方法了
vue 像素字符串与数值之间转换
-
从
styleWidth: '1000px'
这个字符串中提取出数字 1000,可以使用字符串的slice()
方法或者正则表达式 -
方法一:使用
slice()
方法let styleWidth = '1000px'; let number = parseInt(styleWidth.slice(0, styleWidth.length - 2)); console.log(number); // 输出:1000
- 这个方法会从字符串的开始到倒数第二个字符(即
'px'
之前的字符)进行截取,然后使用parseInt()
函数将截取到的字符串转换为整数。
- 这个方法会从字符串的开始到倒数第二个字符(即
-
方法二:使用正则表达式
let styleWidth = '1000px'; let number = parseInt(styleWidth.match(/\d+/)[0]); console.log(number); // 输出:1000
- 这个方法使用正则表达式
\d+
来匹配一个或多个数字,然后使用match()
函数返回匹配结果,再通过索引 0 获取第一个匹配项,最后使用parseInt()
函数将字符串转换为整数。
- 这个方法使用正则表达式
数值和带 px 像素的数值
-
在 js 文件中,这里的两个值:top: 450 和 top: '450px'
- 在 JavaScript 中作为长度值:这可以是像素(px)、百分比(%)、em 等单位。在这种情况下,如:
top: 450
和top: '450px'
是等价的
- 在 JavaScript 中作为长度值:这可以是像素(px)、百分比(%)、em 等单位。在这种情况下,如:
-
请注意,
top: 450
和top: '450px'
的区别仅在于它们的表示方式。在 JavaScript 中,你可以直接使用数字表示长度值,而在 CSS 中,你需要将长度值放在引号中。然而,这两种方式在功能上是等价的