screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@babel/standalone@7.14.7/babel.min.js"></script> </head> <body> <div id="app"></div> <script type="text/babel"> function App() { // Method 1: Using Intl.NumberFormat const formatNumberIntl = (number) => { return new Intl.NumberFormat("it-IT").format(number); }; // Method 2: Using a custom function with regex const formatNumberCustom = (number) => { return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "."); }; // Method 3: Using toLocaleString with Italian options const formatNumberLocale = (number) => { return number.toLocaleString("it-IT"); }; // Method 4: Using parseFloat with fixed decimal places const formatNumberFixedDecimals = (number) => { return parseFloat(number).toFixed(2).replace(".", ","); }; // Method 5: Using a regex to swap decimal and thousands separators const formatNumberRegexSwap = (number) => { return number .toString() .replace(/\./g, "X") .replace(/,/g, ".") .replace(/X/g, ","); }; const number = 1234567.89; return ( <div className='container'> <h3>React js Formatted Number in Italian Style - dot separated (Using different methods):</h3> <p>Method 1: {formatNumberIntl(number)}</p> <p>Method 2: {formatNumberCustom(number)}</p> <p>Method 3: {formatNumberLocale(number)}</p> <p>Method 4: {formatNumberFixedDecimals(number)}</p> <p>Method 5: {formatNumberRegexSwap(number)}</p> </div> ); } ReactDOM.render(<App />, document.getElementById("app")); </script> <style> .container { max-width: 500px; margin: 0 auto; padding: 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); font-family: Arial, sans-serif; } </style> </body> </html>