Description

Znegl

opened on Jan 15, 2020

Issue body actions

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: ?
• Cross-platform modules: ?
• Android Runtime: ?
• iOS Runtime: ?
• Plugin(s): ?

I'm running the latest version of everything (the project is a month old), but couldn't find any version numbers matching the mentioned packages in with either tns info or by looking in my package file.

Describe the bug

To format nice readable numbers all modern browsers support the function toLocaleString, which helps adding localised thousand separators, decimal separators, rounding of decimals, padding of decimals and a lot more.
In NativeScript this functions returns the same value as toString which doesn't support any of the mentioned features.

To Reproduce

const someNumber = 1337.4242
const formattedNumber = someNumber.toLocaleString('en', {maximumFractionDigits: 2})

Expected behavior
formattedNumber should now contain the string 1,337.42
Instead it contains the string 1337.4242

Sample project

I don't have a sample project, but expect the behaviour to be the same in alle projects.

Additional context

We could implement a formatting function ourself, but because of code sharing between projects, it would also mean that this custom formatter would be used in our web based projects, which seems a bit silly, since the browsers already know how to format numbers.

Documentation for the browser implementation can be found here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

Activity

1. NickIliev commented on Jan 15, 2020

   

   NickIliev

   on Jan 15, 2020

   Contributor

   More actions

   NativeScript uses JavaScriptCore VM (for Android) which has a known issue with toLocalString. So that said, there is not much that can be done on the NativeScript side.. you could look for a custom formatter to handle this case.

   Reacted by Nikkolai Fernandez
2. NickIliev

   added

   os: android

   on Jan 15, 2020
3. Znegl commented on Jan 15, 2020

   

   Znegl

   on Jan 15, 2020

   Author

   More actions

   That's sad :'( (not that your'e using a third party, but that they have issues)...

   I'm experiencing the bug on iOS too — is it the same JS core?
4. NickIliev commented on Jan 15, 2020

   

   NickIliev

   on Jan 15, 2020

   Contributor

   More actions

   Not sure if the issue on iOS is the same (the VM is V8 so - no, this is a different VM). Byt the way the VMs are not a third-party library (like a plugin) but the core engines that are handling the runtimes. So the same issue is present in react-native (as they are also using JavaScriptCore for Android).

   Reacted by Thomas Grinderslev
5. NickIliev

   closed this as completedon Jan 15, 2020
6. keithgulbro commented on Apr 13, 2020

   

   keithgulbro

   on Apr 13, 2020

   More actions

   Here's a temporary workaround, obviously not the best solution but it works in Nativescript-Vue:

        var sampleNumber = 123456789;
   
         return (
           "$" +
             sampleNumber
             .toString()
             .split("")
             .reverse()
             .map((number, index, array) => {
               return (index + 1) % 3 === 0 && array[index + 1]
                 ? `,${number}`
                 : number;
             })
             .reverse()
             .join("")
   

   Reacted by Patrick Lohan
7. andresilva-cc commented on May 26, 2020

   

   andresilva-cc

   on May 26, 2020

   More actions

   Here's a temporary workaround, obviously not the best solution but it works in Nativescript-Vue:

        var sampleNumber = 123456789;
   
         return (
           "$" +
             sampleNumber
             .toString()
             .split("")
             .reverse()
             .map((number, index, array) => {
               return (index + 1) % 3 === 0 && array[index + 1]
                 ? `,${number}`
                 : number;
             })
             .reverse()
             .join("")
   

   This almost works, the only problem is that we lose the decimal part (example: 1000.00 turns into $ 1,000)
   EDIT: Fixed it:

   function format(value) {
     const decimalPart = value.toFixed(2).split('.')[1]
     return (
       '$ ' +
         value
         .toString()
         .split('.')[0]
         .split('')
         .reverse()
         .map((number, index, array) => {
           return (index + 1) % 3 === 0 && array[index + 1]
             ? `,${number}`
             : number;
         })
         .reverse()
         .join('')
         + '.' + decimalPart
     )
   }

Issue actions