526互联

百分号、像素与数值的转换与像素区别

发布时间 2023-12-03 20:53:45作者: 朱呀朱~

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' 是等价的

  • 请注意，top: 450 和 top: '450px' 的区别仅在于它们的表示方式。在 JavaScript 中，你可以直接使用数字表示长度值，而在 CSS 中，你需要将长度值放在引号中。然而，这两种方式在功能上是等价的