首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Javascript数据格式化在Safari for iOS中不起作用,只能得到NaN作为结果(使用React显示数据)

这个问题可能是由于Safari for iOS对某些JavaScript特性的支持不完善导致的。为了解决这个问题,你可以尝试以下方法:

  1. 使用parseFloat()parseInt()函数来解析数字:
代码语言:javascript
复制
const number = parseFloat("123.45");
  1. 使用Number()函数来转换数字字符串:
代码语言:javascript
复制
const number = Number("123.45");
  1. 使用toFixed()方法来格式化数字:
代码语言:javascript
复制
const number = 123.45;
const formattedNumber = number.toFixed(2); // "123.45"
  1. 如果你在使用React,可以使用NumberFormat组件(需要安装react-number-format库):
代码语言:javascript
复制
npm install react-number-format

然后在你的组件中使用它:

代码语言:javascript
复制
import NumberFormat from 'react-number-format';

function App() {
  const number = 123.45;

  return (
    <div>
      <NumberFormat value={number} displayType="text" thousandSeparator={true} decimalPlaces={2} />
    </div>
  );
}
  1. 如果问题仍然存在,可以尝试使用第三方库,如moment.jsdate-fns,来进行日期和时间的格式化:
代码语言:javascript
复制
npm install moment

然后在你的组件中使用它:

代码语言:javascript
复制
import moment from 'moment';

function App() {
  const date = new Date();

  return (
    <div>
      <p>{moment(date).format('YYYY-MM-DD HH:mm:ss')}</p>
    </div>
  );
}
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

苹果拒绝支持PWA的行为对Web贻害无穷!

我本来很想开发一个PWA,但是由于这种使用iOS的比例,导致不可行,所以我们就React Native(这是一个了不起的决定)。...iOS上做不到) 提供添加到主屏幕的元数据 首次加载很快甚至3G环境 网站跨浏览器 页面过渡不会被网络阻塞 每个页面都有一个URL 这是认真的吗?...苹果的“全屏”模式充满了漏洞 我尽可能地试着移动端 safari 推广苹果的“类原生”体验——但它有一些严重的漏洞,而苹果公司根本不关心它们。...我移动版 Safari 的“全屏”或“Web应用”模式中发现的一些bug包括: 加载屏幕不起作用(及其恶劣——已经超过18000的点击量,没有得到苹果的回应。...作为一个开发人员,你要做的最重要的事情之一就是:决定把自己的时间用在哪里,所以在这里我就不建议你学 React Native 了。

1.9K30

Hippy 常用调试方法和常见问题案例

相较于其他跨端框架,Hippy 对前端开发者更友好:紧贴 W3C 标准,遵从网页开发各项规则,使用 JavaScript 为开发语言,同时支持 React 和 Vue 两种前端主流框架。...其实非常简单,Hippy iOS 时通过自带的 JavaScriptCore 运行的,所以可以通过自带的 Safar 进行调试, Safari 的设置 -> 高级打开开发者菜单后 ,启动 Hippy...[Safari 调试菜单位置] 然后就可以用 Safari 开始调试了,唯一要注意的时,断点需要在启动后才生效,启动时是断不下来的,启动问题可以关键点加上日志,日志能够正常输出。...绝大多数情况下作为前端开发确实不需要关心内存占用,但是 Hippy 不太一样,Hippy 是前端的开发方式去开发终端 App,有几个类组件卸载时一定要记得销毁,包含了 React 负责事件监听的...目前很多业务开发时 key 不指定,或者把 index 作为 key,前者会导致 ListView 每次有数据更新都做一次完整的 Array diff,开销非常大,后者会导致删除中间一个节点时将后面所有的节点全部删除再重新插入一次

4.5K100
  • NativeScript和React Native对比

    然后,NativeScript运行时环境找到原生的目标API,将JS数据类型转化为相应的原生类型,然后调用原生API,并将得到结果值返回,具体流程如下图所示: ?      ...,它的 rootView 继承自 UIView,所以可以部分 View 是使用,很方便混着,不需要重写整个 app,而且混用的时候还需要显示地将 API 暴露给 JavaScript NativeScript...:NativeScript和React不同,无法与原生项目融合,即你只能纯写个NativeScript的应用,基本不可能把它抽离出来作为某原生应用的一部分来出现。...2.3、社区资源 RN:比较丰富,网上N多相关学习介绍文章,有非常丰富的中文学习资源 NativeScript:学习资源较为匮乏,一般只能从官网学习 2.4、是否有成熟的产品使用 RN:RN目前有很多成熟的产品的产品使用...但是目前NativeScript里面Button是没办法设置背景的,所以要想实现这个按钮,只能使用图片,所以上面那个按钮NativeScriptXML布局里面的代码是这样的: <GridLayout

    4K10

    一天梳理React面试高频知识点

    它提供了一系列的React组件,包括数字格式化、字符串格式化、日期格式化等。React-intl,可以配置不同的语言包,他的工作原理就是根据需要,语言包之间进行切换。...总结: JSX 是一个 JavaScript 的语法扩展,结构类似 XML。JSX 主要用于声明 React 元素,但 React 并不强制使用 JSX。...编译版本 React会忽略 propType 验证以及其他的告警信息,同时还会降低代码库的大小,React 使用了 Uglify 插件来移除生产环境下不必要的注释等信息 Reducer文件里,对于返回的结果... Reducer文件里,对于返回的结果,必须要使用 Object.assign ( )来复制一份新的 state,否则页面不会跟着数据刷新。...在编译完成之后,JSX 表达式就变成了常规的 JavaScript 对象,这意味着你可以 if 语句和 for 循环内部使用 JSX,将它赋值给变量,接受它作为参数,并从函数返回它。

    2.8K20

    前端开发面试题

    list-item 象块类型元素一样显示,并添加样式列表标记。 table 此元素会作为块级表格来显示。...(stack)的简单数据段,占据空间小、大小固定,属于被频繁使用数据,所以放入栈存储; 引用数据类型存储堆(heap)的对象,占据空间大、大小不固定。...如果存储,将会影响程序运行的性能;引用数据类型存储了指针,该指针指向堆该实体的起始地址。当解释器寻找引用值时,会首先检索其的地址,取得地址后从堆获得实体 ?...使用父组件,通过props将变量传入子组件(如通过refs,父组件获取一个子组件的方法,简单包装后,将包装后的方法通过props传入另一个子组件) 用过 React 技术栈哪些数据流管理库?...减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成(例如join查询),减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。

    5.1K52

    热门跨平台方案对比:WEEX、React Native、Flutter和PWA

    具体来说就是,当需要执行渲染操作时,iOS环境下选择基于JavaScriptCore的iOS系统提供的JSContext,Android环境下使用基于JavaScriptCore的JavaScript...React NativeAndroid平台上的通信原理 React Native的三层架构,最核心的就是中间的C++层,C++层最核心的功能就是封装JavaScriptCore,用于执行对JavaScript...但需要注意的是,由于JavaScript代码运行在独立的JavaScript线程,所以JavaScript不能处理耗时的操作,如fetch网络请求、图片加载和数据持久化等。...与React Native和WEEX使用JavaScript作为编程语言,以及使用平台自身引擎渲染界面不同,Flutter直接选择使用2D绘图引擎库Skia来渲染界面。 ?...与React Native和WEEX使用原生组件渲染界面不同,Flutter并不需要使用原生组件来渲染界面,而是使用自带的渲染引擎(Engine层)来绘制页面组件(Flutter显示单元),并且Dart

    4.1K10

    React 基础

    简介 JSX是JavaScript XML的简写,表示了Javascript代码写XML(HTML)格式的代码 优势:声明式语法更加直观,与HTML结构相同,降低学习成本,提高开发效率。...": true, // 默认使用prittier作为格式化工具 "editor.defaultFormatter": "esbenp.prettier-vscode", JSX嵌入JavaScript...{/* 这是jsx的注释 */} 推荐快键键 ctrl + / 不要出现语句,比如if for 条件渲染 react,一切都是javascript,所以条件渲染完全是通过js来控制的... } else { return 数据加载完成,此处显示加载后的数据 } } const title = 条件渲染:{loadData()}...的核心内容 JSX表示JS代码书写HTML结构,是React声明式的体现 使用JSX配合嵌入的JS表达式,条件渲染,列表渲染,可以渲染任意的UI结构 结果使用className和style

    2.1K20

    ES7、ES8新特性

    概述 JavaScript作为一门处于高速发展期的开发语言,正在变的越来越完善、稳定。我们必须拥抱这些变化,并且我们需要把ES8加入到我们的技术栈。...React') } ES7使用includes代码格式如下: let arr = ['react', 'angular', 'vue'] // Correct if (arr.includes...includes也可以NaN(非数字)使用。最后,includes第二可选参数fromIndex,这对于优化是有好处的,因为它允许从特定位置开始寻找匹配。...padStart()开始部位填充,返回一个给出长度的字符串,填充物给定字符串,把字符串填充到期望的长度。一个经典例子是使用空格创建列,使用它,可以帮助我们格式化一些字符串。...可以从头到尾读起来非常简单和易懂,因为出现结果顺序和函数题中从头到尾顺序一样啊! 共享内存与原子操作 当内存被共享时,多个线程可以并发读、写内存相同的数据

    3.5K50

    ES7和ES8新特性介绍

    概述 JavaScript作为一门处于高速发展期的开发语言,正在变的越来越完善、稳定。我们必须拥抱这些变化,并且我们需要把ES8加入到我们的技术栈。...React') } ES7使用includes代码格式如下: let arr = ['react', 'angular', 'vue'] // Correct if (arr.includes...includes也可以NaN(非数字)使用。最后,includes第二可选参数fromIndex,这对于优化是有好处的,因为它允许从特定位置开始寻找匹配。...padStart()开始部位填充,返回一个给出长度的字符串,填充物给定字符串,把字符串填充到期望的长度。一个经典例子是使用空格创建列,使用它,可以帮助我们格式化一些字符串。...可以从头到尾读起来非常简单和易懂,因为出现结果顺序和函数题中从头到尾顺序一样啊! 共享内存与原子操作 当内存被共享时,多个线程可以并发读、写内存相同的数据

    5.4K60

    浅谈Hybrid

    react native 一样,weex 所有的标签也都不是真实控件,JS 代码中所生成的 dom,最终都是由 Native 端解析,再得到对应的 Native 控件渲染,如 Android 标签对应...和主流的浏览器都早已支持了 PWA 标准, iOS 11.3 和 macOS 10.13.4 上,苹果的 Safari 上也支持了 PWA。...本质其实是原生的 App 使用 WebView 作为容器直接承载 Web 页面。因此,最核心的点就是 Native 端 与 H5 端 之间的双向通讯层,也就是我们常说的 JSBridge。 ?...但这几种方法实际的使用中有利有弊,但由于prompt是几个里面唯一可以自定义返回值,可以做同步交互的,所以目前的使用,prompt是使用的最多的。...这时我们需要使用前面提到的 prompt 方法进行兼容,让 H5 端 通过 prompt 进行数据的发送,客户端进行拦截并获取数据

    6.8K30

    移动端开发遇到的坑点及总结(持续更新)

    移动端开发遇到的坑点及总结 前言 一、new Date()IOS上出现值为NAN的问题 二、Android部分机型使用height和line-height等值设置垂直居中,但会显示偏高的问题 三、...有新的坑点会总结进来) 一、new Date()IOS上出现值为NAN的问题 我们常用new Date()去获取时间戳,例如 new Date("2017-08-11 12:00:00"); 但在IOS...下,这是使用获取到的值是NAN。...真机上测试时,Android是没问题的,但在IOS,却会将数字识别成电话号码,有时候我们如果对a标签进行了全局样式的修改,还会影响到我们的布局。...原因:这是IOS采用Safari浏览器内核的原因,会在数字串加上a标签,并且a标签里添加属性值tel 解决办法:head里面添加如下mate标签就可以了。

    97630

    移动web开发需要注意的二十点

    5、块级化a标签 请保证将每条数据都放在一个a标签,为什么这样做呢?因为触控手机上,为提升用户体验,尽可能的保证用户的可点击区域较大。...至少Apple webapp API已经说到了:我们为了让用户safari中正常的浏览网页,我们必须保证用户的设备处于任何一个方位时,safari都能够正常的显示网页内容(也就是自适应),所以我们禁止开发者阻止浏览器的...16、iOS如何获取滚动条的值 桌面浏览器想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的,但在iOS你会发现这两个属性是未定义的,为什么呢...20、如何解决iOS 4.3版本safari对页面5位数字的自动识别和自动添加样式 新的iOS系统也就是4.3版本,升级后对safari造成了一个bug:即使你添加了如下的meta标签,safari...全栈工程师技能大全 WEB前端性能优化常见方法 一小时内搭建一个全栈Web应用框架 干货:CSS 专业技巧 四步实现React页面过渡动画效果 让你分分钟理解 JavaScript 闭包 ----

    1.9K20

    JavaScript字符串间的比较

    字符串JavaScript几乎无处不在,在你处理用户的输入数据的时候,在读取或设置DOM对象的属性时,操作cookie时,当然还有更 多…。...@雪斌JavaScript的字符串操作一文中讲的很详细,但是对于涉及Js字符串的比较,还是有必要再学习和探究下的。...; 这两个变量含有相同的字符序列,但数据类型却不同,前者为string,后者为object,使用”==”操作符时,JavaScript会尝试各种求值,以检测两者是否会在某种情况下相等。...如果用””来比较字符串,那么JavaScript把它们作为Unicode来比较, 但显然,人们浏览网页时不会把文本当作Unicode来阅读:) 比如在西班牙语,按照传统的排序,”ch”将作为一个字符排在...Javascript解释器,只”提升”var命令定义的变量,对不使用var命令、直接赋值的变量不起作用,这就是为什么不加var会报错的原因。

    9.4K90

    React Native实践有感

    RN版本升级RN0.59及之前的版本只能手动安装第三方库,0.60及以上版本可以auto link了,项目的配置简单了许多,所以最好升级到0.60版本以上。...权限也不起作用。...这里推荐使用react-native-fast-image,其iOS端基于SDWebImage,Android使用Glide来加载图片,有比较完善的缓存机制,能够快速加载并显示图片。...使用typescript 语言选择上,为什么要用typescript而不是javascript?...因为typescript有类型定义,有类、接口、模块的概念,可以说它是建立JavaScript的基础上的强类型语言,对于项目开发而言,我们希望每个类每个对象都有比较确定的类型,在编码阶段就能对数据类型进行明确的限定

    2.5K10

    JavaScript小技能:变量

    I 变量的声明 变量是存储值的容器, JavaScript 声明一个新变量的方法是使用关键字let 、const 和 var,let 和 const 关键字允许你创建块作用域的变量。...null ( non-value)空类型 , 只有显示声明null才能使用 NaN : (Not a Number 的缩写),如果给定的字符串不存在数值形式,函数会返回一个特殊的值 NaN...parseInt("hello", 10); // NaN "test"/123 //把 NaN 作为参数进行任何数学运算,结果也会是 NaNNaN + 5; //NaN //使用内置函数 isNaN...js的数组可变长,存储数据不固定,存储空间不一定连续。 JavaScript 的数组是一种特殊的对象,与普通对象类似以数字为属性名,但只能通过[] 来访问。.../details/126104974 iOS小技能:链式编程iOS开发的应用https://blog.csdn.net/z929118967/article/details/75219317

    68840

    JavaScript学习笔记+常用js用法、范例(一)

    调用独立JavaScript文件:html写 不能用空标志。...:JavaScript属于松散类型的程序语言 变量声明的时候并不需要指定数据类型;变量只有赋值的时候才会确定数据类型 表达式包含不同类型数据则在计算过程中会强制进行类别转换(优先级:布尔–>数字–...未定义的返回”undefined” number: typeof(NaN) 和 typeof(Infinity) 都返回 number; NaN参与任何数值的计算结果都是NaN,且 NaN !..., Global , Object, RegExp JavaScript除了null和undefined以外其它的数据类型都被定义成了对象 可以用创建对象的方法定义变量; String、Math、Array...有了文字节点后,可以参考文字节点的nodeValue属性来得到文字。 读取XML时,须考虑它的空格和换行符也作为子节点。

    2.1K10

    Safari技术预览版40更新说明

    Safari技术预览版 发布版本40现在在macOS Sierra和 macOS High Sierra 的betas版可以下载 使用了。...() 和 addPath() 方法(r221462) CSS 删除对于 >> 后代选择器语法的支持 (r221788) 修复了伪元素display:none 子树时getComputedStyle 获取结果错误的问题...) 修改使用超过内容尺寸的转化尺寸为自动最小尺寸 (r221910) Web Inspector 修复了窄宽度导致工具栏按钮隐藏的问题 (r221338) “设置”选项卡防止拆分控制台 (r221882...) Media 防止增加报告的totalFrameDelay 用于未显示的帧,或暂停时进入的帧 (r221937) 修复了MSE-to-Canvas的绘画,会在繁重的工作负载“卡住”的问题(r221430...一小时内搭建一个全栈Web应用框架 干货:CSS 专业技巧 四步实现React页面过渡动画效果 让你分分钟理解 JavaScript 闭包 ---- ---- 小手一抖,资料全有。

    61730
    领券