mathieucaroff/README.md

## README.md

      
    Raw
  

              README.md
            
          
    My version of the ultimate whatever-to-number conversion table, heavily inspired by https://stackoverflow.com/a/17106702


## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JS conversion to number</title>
    <style>
      table {
        border-collapse: collapse;
      }
      tr:nth-child(odd) {
        background: #fafafa;
      }
      th {
        text-align: left;
        font-family: monospace;
        font-weight: 900;
        font-size: 14px;
      }
      td {
        border: 1px solid #e0e0e0;
        padding: 5px;
        font: 12px monospace;
      }
      td:not(:first-child) {
        text-align: right;
      }
      thead td {
        background: #3663ae;
        color: white;
      }
    </style>
  </head>
  <body>
    <script src="main.ts" type="module"></script>
  </body>
</html>

## main.ts
const EXPRESSION_ARRAY = [
  ['parseInt(x)', (x) => parseInt(x), 40],
  ['parseFloat(x)', (x) => parseFloat(x), 5],
  ['Number(x)', (x) => Number(x), 13],
  ['+x', (x) => +x, 2],
  ['~~x', (x) => ~~x, 0],
  ['x >>> 0', (x) => x >>> 0, 0],
  ['isNaN(x)', (x) => isNaN(x), 3],
  ['Number.isNaN(x)', (x) => Number.isNaN(x), 0],
] as const

const VALUE_ARRAY = [
  ['"123"', '123'],
  ['"+123"', '+123'],
  ['"-123"', '-123'],
  ['"123.45"', '123.45'],
  ['"-123.45"', '-123.45'],
  ['"12e5"', '12e5'],
  ['"12e-5"', '12e-5'],
  [],
  ['"0123"', '0123'],
  ['"0000123"', '0000123'],
  ['"0b111"', '0b111'],
  ['"0o10"', '0o10'],
  ['"0xBABE"', '0xBABE'],
  [],
  ['"4294967295"', '4294967295'],
  ['"123456789012345678"', '123456789012345678'],
  ['"12e999"', '12e999'],
  [],
  ['""', ''],
  ['"123foo"', '123foo'],
  ['"123.45foo"', '123.45foo'],
  ['"  123   "', '  123   '],
  ['"foo"', 'foo'],
  ['"12e"', '12e'],
  ['"0b567"', '0b567'],
  ['"0o999"', '0o999'],
  ['"0xFUZZ"', '0xFUZZ'],
  [],
  ['"+0"', '+0'],
  ['"-0"', '-0'],
  ['"Infinity"', 'Infinity'],
  ['"+Infinity"', '+Infinity'],
  ['"-Infinity"', '-Infinity'],
  ['BigInt(1)', BigInt(1)],
  [],
  ['null', null],
  ['undefined', undefined],
  ['true', true],
  ['false', false],
  ['Infinity', Infinity],
  ['NaN', NaN],
  [],
  ['{}', {}],
  [
    '{valueOf: function f(){return 42}}',
    {
      valueOf: function f() {
        return 42
      },
    },
  ],
  [
    '{toString: function f(){return "56"}}',
    {
      toString: function f() {
        return '56'
      },
    },
  ],
] as const

document.body.appendChild(
  h('table', {}, [
    h('tr', {}, [
      h('th', { textContent: 'Method stats ->' }),
      ...EXPRESSION_ARRAY.map(([_exp, _call, value]) =>
        h('th', {}, [h('input', { value })])
      ),
    ]),
    h('tr', {}, [
      h('th', { textContent: 'Value v' }),
      ...EXPRESSION_ARRAY.map(([expression]) =>
        h('th', { textContent: expression }, [])
      ),
    ]),
    ...VALUE_ARRAY.map(([text, value]) =>
      text === undefined
        ? h('tr', {}, [h('td')])
        : h('tr', {}, [
            h('th', { textContent: text }),
            ...EXPRESSION_ARRAY.map(([_expression, callback]) =>
              h('td', {}, [evaluate(value, callback)])
            ),
          ])
    ),
  ])
)

function evaluate(input, callback: (s) => any) {
  let result
  let output
  try {
    result = callback(input)
    output = h('span', { textContent: result })
  } catch (e) {
    output = h('span', { textContent: 'Error' })
    result = NaN
  }
  if (result === true) {
    output.style.fontWeight = 900
    output.style.color = '#007700'
  }
  if (Object.is(result, NaN)) {
    output.style.color = 'red'
  }
  return output
}

function h(
  name,
  props: { textContent?: string; value?: string | number } = {},
  children: HTMLElement[] = []
) {
  const element = document.createElement(name)
  element.textContent = props.textContent
  element.value = props.value
  children.forEach((child) => {
    element.appendChild(child)
  })
  return element
}

## TABLE.md

      
    Raw
  

              TABLE.md
            
          
    Value v \ Method > parseInt(x) parseFloat(x) Number(x) +x ~~x x >>> 0 isNaN(x) Number.isNaN(x)
"123" 123 123 123 123 123 123 false false
"+123" 123 123 123 123 123 123 false false
"-123" -123 -123 -123 -123 -123 4294967173 false false
"123.45" 123 123.45 123.45 123.45 123 123 false false
"-123.45" -123 -123.45 -123.45 -123.45 -123 4294967173 false false
"12e5" 12 1200000 1200000 1200000 1200000 1200000 false false
"12e-5" 12 0.00012 0.00012 0.00012 0 0 false false
"0123" 123 123 123 123 123 123 false false
"0000123" 123 123 123 123 123 123 false false
"0b111" 0 0 7 7 7 7 false false
"0o10" 0 0 8 8 8 8 false false
"0xBABE" 47806 0 47806 47806 47806 47806 false false
"4294967295" 4294967295 4294967295 4294967295 4294967295 -1 4294967295 false false
"123456789012345678" 123456789012345680 123456789012345680 123456789012345680 123456789012345680 -1506741424 2788225872 false false
"12e999" 12 Infinity Infinity Infinity 0 0 false false
"" NaN NaN 0 0 0 0 false false
"123foo" 123 123 NaN NaN 0 0 true false
"123.45foo" 123 123.45 NaN NaN 0 0 true false
"  123   " 123 123 123 123 123 123 false false
"foo" NaN NaN NaN NaN 0 0 true false
"12e" 12 12 NaN NaN 0 0 true false
"0b567" 0 0 NaN NaN 0 0 true false
"0o999" 0 0 NaN NaN 0 0 true false
"0xFUZZ" 15 0 NaN NaN 0 0 true false
"+0" 0 0 0 0 0 0 false false
"-0" 0 0 0 0 0 0 false false
"Infinity" NaN Infinity Infinity Infinity 0 0 false false
"+Infinity" NaN Infinity Infinity Infinity 0 0 false false
"-Infinity" NaN -Infinity -Infinity -Infinity 0 0 false false
BigInt(1) 1 1 1 Error 1 Error Error false
null NaN NaN 0 0 0 0 false false
undefined NaN NaN NaN NaN 0 0 true false
true NaN NaN 1 1 1 1 false false
false NaN NaN 0 0 0 0 false false
Infinity NaN Infinity Infinity Infinity 0 0 false false
NaN NaN NaN NaN NaN 0 0 true true
{} NaN NaN NaN NaN 0 0 true false
{valueOf: function f(){return 42}} NaN NaN 42 42 42 42 false false
{toString: function f(){return "56"}} 56 56 56 56 56 56 false false
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>JS conversion to number</title>
	<style>
	table {
	border-collapse: collapse;
	}
	tr:nth-child(odd) {
	background: #fafafa;
	}
	th {
	text-align: left;
	font-family: monospace;
	font-weight: 900;
	font-size: 14px;
	}
	td {
	border: 1px solid #e0e0e0;
	padding: 5px;
	font: 12px monospace;
	}
	td:not(:first-child) {
	text-align: right;
	}
	thead td {
	background: #3663ae;
	color: white;
	}
	</style>
	</head>
	<body>
	<script src="main.ts" type="module"></script>
	</body>
	</html>
	const EXPRESSION_ARRAY = [
	['parseInt(x)', (x) => parseInt(x), 40],
	['parseFloat(x)', (x) => parseFloat(x), 5],
	['Number(x)', (x) => Number(x), 13],
	['+x', (x) => +x, 2],
	['~~x', (x) => ~~x, 0],
	['x >>> 0', (x) => x >>> 0, 0],
	['isNaN(x)', (x) => isNaN(x), 3],
	['Number.isNaN(x)', (x) => Number.isNaN(x), 0],
	] as const

	const VALUE_ARRAY = [
	['"123"', '123'],
	['"+123"', '+123'],
	['"-123"', '-123'],
	['"123.45"', '123.45'],
	['"-123.45"', '-123.45'],
	['"12e5"', '12e5'],
	['"12e-5"', '12e-5'],
	[],
	['"0123"', '0123'],
	['"0000123"', '0000123'],
	['"0b111"', '0b111'],
	['"0o10"', '0o10'],
	['"0xBABE"', '0xBABE'],
	[],
	['"4294967295"', '4294967295'],
	['"123456789012345678"', '123456789012345678'],
	['"12e999"', '12e999'],
	[],
	['""', ''],
	['"123foo"', '123foo'],
	['"123.45foo"', '123.45foo'],
	['" 123 "', ' 123 '],
	['"foo"', 'foo'],
	['"12e"', '12e'],
	['"0b567"', '0b567'],
	['"0o999"', '0o999'],
	['"0xFUZZ"', '0xFUZZ'],
	[],
	['"+0"', '+0'],
	['"-0"', '-0'],
	['"Infinity"', 'Infinity'],
	['"+Infinity"', '+Infinity'],
	['"-Infinity"', '-Infinity'],
	['BigInt(1)', BigInt(1)],
	[],
	['null', null],
	['undefined', undefined],
	['true', true],
	['false', false],
	['Infinity', Infinity],
	['NaN', NaN],
	[],
	['{}', {}],
	[
	'{valueOf: function f(){return 42}}',
	{
	valueOf: function f() {
	return 42
	},
	},
	],
	[
	'{toString: function f(){return "56"}}',
	{
	toString: function f() {
	return '56'
	},
	},
	],
	] as const

	document.body.appendChild(
	h('table', {}, [
	h('tr', {}, [
	h('th', { textContent: 'Method stats ->' }),
	...EXPRESSION_ARRAY.map(([_exp, _call, value]) =>
	h('th', {}, [h('input', { value })])
	),
	]),
	h('tr', {}, [
	h('th', { textContent: 'Value v' }),
	...EXPRESSION_ARRAY.map(([expression]) =>
	h('th', { textContent: expression }, [])
	),
	]),
	...VALUE_ARRAY.map(([text, value]) =>
	text === undefined
	? h('tr', {}, [h('td')])
	: h('tr', {}, [
	h('th', { textContent: text }),
	...EXPRESSION_ARRAY.map(([_expression, callback]) =>
	h('td', {}, [evaluate(value, callback)])
	),
	])
	),
	])
	)

	function evaluate(input, callback: (s) => any) {
	let result
	let output
	try {
	result = callback(input)
	output = h('span', { textContent: result })
	} catch (e) {
	output = h('span', { textContent: 'Error' })
	result = NaN
	}
	if (result === true) {
	output.style.fontWeight = 900
	output.style.color = '#007700'
	}
	if (Object.is(result, NaN)) {
	output.style.color = 'red'
	}
	return output
	}

	function h(
	name,
	props: { textContent?: string; value?: string \| number } = {},
	children: HTMLElement[] = []
	) {
	const element = document.createElement(name)
	element.textContent = props.textContent
	element.value = props.value
	children.forEach((child) => {
	element.appendChild(child)
	})
	return element
	}
Value v \ Method >	parseInt(x)	parseFloat(x)	Number(x)	+x	~~x	x >>> 0	isNaN(x)	Number.isNaN(x)
"123"	123	123	123	123	123	123	false	false
"+123"	123	123	123	123	123	123	false	false
"-123"	-123	-123	-123	-123	-123	4294967173	false	false
"123.45"	123	123.45	123.45	123.45	123	123	false	false
"-123.45"	-123	-123.45	-123.45	-123.45	-123	4294967173	false	false
"12e5"	12	1200000	1200000	1200000	1200000	1200000	false	false
"12e-5"	12	0.00012	0.00012	0.00012	0	0	false	false

"0123"	123	123	123	123	123	123	false	false
"0000123"	123	123	123	123	123	123	false	false
"0b111"	0	0	7	7	7	7	false	false
"0o10"	0	0	8	8	8	8	false	false
"0xBABE"	47806	0	47806	47806	47806	47806	false	false

"4294967295"	4294967295	4294967295	4294967295	4294967295	-1	4294967295	false	false
"123456789012345678"	123456789012345680	123456789012345680	123456789012345680	123456789012345680	-1506741424	2788225872	false	false
"12e999"	12	Infinity	Infinity	Infinity	0	0	false	false

""	NaN	NaN	0	0	0	0	false	false
"123foo"	123	123	NaN	NaN	0	0	true	false
"123.45foo"	123	123.45	NaN	NaN	0	0	true	false
" 123 "	123	123	123	123	123	123	false	false
"foo"	NaN	NaN	NaN	NaN	0	0	true	false
"12e"	12	12	NaN	NaN	0	0	true	false
"0b567"	0	0	NaN	NaN	0	0	true	false
"0o999"	0	0	NaN	NaN	0	0	true	false
"0xFUZZ"	15	0	NaN	NaN	0	0	true	false

"+0"	0	0	0	0	0	0	false	false
"-0"	0	0	0	0	0	0	false	false
"Infinity"	NaN	Infinity	Infinity	Infinity	0	0	false	false
"+Infinity"	NaN	Infinity	Infinity	Infinity	0	0	false	false
"-Infinity"	NaN	-Infinity	-Infinity	-Infinity	0	0	false	false
BigInt(1)	1	1	1	Error	1	Error	Error	false

null	NaN	NaN	0	0	0	0	false	false
undefined	NaN	NaN	NaN	NaN	0	0	true	false
true	NaN	NaN	1	1	1	1	false	false
false	NaN	NaN	0	0	0	0	false	false
Infinity	NaN	Infinity	Infinity	Infinity	0	0	false	false
NaN	NaN	NaN	NaN	NaN	0	0	true	true

{}	NaN	NaN	NaN	NaN	0	0	true	false
{valueOf: function f(){return 42}}	NaN	NaN	42	42	42	42	false	false
{toString: function f(){return "56"}}	56	56	56	56	56	56	false	false