首页 > 其他分享 >百分号、像素与数值的转换与像素区别

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

时间:2023-12-03 20:55:24浏览次数:35  
标签:百分号 top 数值 像素 parseInt let 字符串 styleWidth

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

标签:百分号,top,数值,像素,parseInt,let,字符串,styleWidth
From: https://www.cnblogs.com/zhu-ya-zhu/p/17873746.html

相关文章

  • 极语言3-11像素格式类、调色类、色度类、位图数据类、变色类、路径点类——成员表
    中文名字英文名称长度作用解释像素格式类PIXELFORMATDESCRIPTOR46包含了逻辑字体信息的结构像素格式类——成员表长度nSize整形结构的大小版本nVersion整形结构的版本,一般设为1标志dwFlags整数表明像素缓冲特性的标志位,如缓冲是否支持GDI或OpenGL等索引iPixelType整数说明象素数据......
  • 数值分区间
    问题:B列小于10大于等于0的返回B列数值;大于等于10小于20的返回11;大于等于20的返回22;大于等于-5小于0的返回-1,大于等于-10小于-5的返回-2AI解决:调整提问语序:B列大于等于20的返回22;大于等于10小于20的返回11;大于等于0小于10的返回B列数值;大于等于-5小于0的返回-1,......
  • SAP ABAP RZ11 事务码里 Instance Profile 和 Current Value 等参数值的解读
    首先,让我们了解在SAPABAP系统中通过事务码RZ11查看参数时,涉及的四个重要组件:KernelDefault、DefaultProfile、InstanceProfile和CurrentValue。KernelDefault:含义:KernelDefault表示系统中SAP内核(Kernel)的默认配置参数值。这是SAP系统内核的全局默认设置,通常在SAP系统......
  • Numpy数值计算Numpy 进阶在线闯关_头歌实践教学平台
    Numpy数值计算进阶第1关Numpy广播第2关Numpy高级索引第3关Numpy迭代数组第1关Numpy广播任务描述本关任务:给定两个不同形状的数组,求出他们的和。编程要求首先用arange()生成一个数组,然后用reshape()方法,将数组切换成4x3的形状,最后再与basearray相加,输出它们的和......
  • matlab在图像中随机更改像素值程序
    I=imread('C:\Users\wangd\Desktop\result3.png');%m=rgb2gray(I);%r=unidrnd(255,1,100);%产生一个1*100的数组,数组中的值为1至255中的随机值%r1=randi([2,7],10,100);%在开区间(2,7)生成10*100型随机矩阵subplot(2,2,1);imshow(I);title('原始图像');forw=1:......
  • C语言(二):整型变量的数值范围
    #include<stdio.h>intmain(){ inta=0; while(a<a+1) { a++; } printf("int类型的最大值是:%d\n\n",a); printf("int类型的最大值+1是:%d\n\n",a+1); intb=0; while(b>b-1) { b--; } printf("int类型的最小值是:%d\n\n",b);......
  • 使用math库函数计算数值
    #include<stdio.h>#include<math.h> intmain(){ floata=2.78f,d=0.8888; intb=90; intc=5; printf("cos(%f)=%f\n",2.78,cos(2.78)); printf("log10(%d)=%f\n",90,log10(90)); printf("sqrt(%d)=%f\n&......
  • tableau用数值呈现条形图的总计
     创建计算字段创建计算字段:销售额总计,键入函数:IFSize()=1THEN0ELSESum([销售额])END 创建视图将度量“销售额”拖放至列,将维度“子类别”拖放至行,降序排序。将列上的“销售额”胶囊拖放至“标记”卡的标签中,再将计算字段“销售额总计”拖放至列。 单击顶部菜单......
  • python 将数值 0 1 转 bool
    Python将数值0和1转换为布尔值介绍在Python中,布尔值是True和False,它们是逻辑运算的结果。然而,有时我们需要将数值0和1转换为布尔值。本文将介绍如何在Python中实现这种转换,并提供代码示例。数值0和1的含义在大多数编程语言中,0通常表示False,而1通常表示True。在Python中也是......
  • 16-基础SQL-函数-数值函数
    什么是函数:是指一段可以直接被另一段程序调用的程序或代码MySQL的函数主要包括:字符串函数、数值函数、日期函数、流程函数。数值函数常见的数值函数如下:CEIL(x)演示:对1.2进行向上取整SELECTCEIL(1.2);FLOOR(x)演示:对1.6进行向下取整SELECTFLOOR(1.6);MOD(x,......