Convert Fraction String to Decimal?

Question

I'm trying to create a javascript function that can take a fraction input string such as '3/2' and convert it to decimal—either as a string '1.5' or number 1.5

function ratio(fraction) {
    var fraction = (fraction !== undefined) ? fraction : '1/1',
    decimal = ??????????;
    return decimal;
});

Is there a way to do this?

`eval(fraction)` would of course work, but only if you trust your input. — cdhowie, Aug 22 '11 at 02:39
Note that there are many fractions that can't be exactly represented as decimal numbers (e.g. 1/3) and many decimals that can't be exactly represented in javascript: `0.0065 + 0.0005 = 0.006999999999999999;` — RobG, Aug 22 '11 at 04:25

score 52 · Accepted Answer · answered Aug 22 '11 at 02:49

52

Since no one has mentioned it yet there is a quick and dirty solution:

var decimal = eval(fraction);

Which has the perks of correctly evaluating all sorts of mathematical strings.

eval("3/2")    // 1.5
eval("6")      // 6
eval("6.5/.5") // 13, works with decimals (floats)
eval("12 + 3") // 15, you can add subtract and multiply too

People here will be quick to mention the dangers of using a raw eval but I submit this as the lazy mans answer.

answered Aug 22 '11 at 02:49

5

+1 since it _is_ an easy solution and you have warned of the dangers. – paxdiablo Aug 22 '11 at 02:53
1

@Nat This is exactly all I need in this case. Thx! – ryanve Aug 22 '11 at 02:58
Not lazy, it's what *eval* is meant for - evaluating expressions that aren't known until runtime. – RobG Aug 22 '11 at 04:07
This is an old question, but I would like to understand what the dangers of using eval in this case would be? I'm new to JS but this solved my problem very nicely, however this is user inputted data so could this cause problems? – GiH Mar 04 '13 at 20:35
3

@GiH eval is slow, and potentially dangerous. If the user can figure out a way to get you to call `eval()` on his string, then he can potentially do XSS with it. – Matt Greer Feb 19 '14 at 01:23
"since it is an easy solution and you have warned of the dangers" – but that's just it, he DOESN'T warn of the dangers. A complete answer would state why they shouldn't do this! – Indolering Oct 20 '14 at 02:48
2

@Indolering Right. He didn't warn of -the- dangers. But he did mention there are dangers associated. For a list of -the- dangers we can all ask uncle google, or bing or whatever ;) – Ricardo Appleton Feb 21 '17 at 17:06

score 22 · Answer 2 · answered Aug 22 '11 at 02:42

22

Here is the bare bones minimal code needed to do this:

var a = "3/2";
var split = a.split('/');
var result = parseInt(split[0], 10) / parseInt(split[1], 10);
alert(result); // alerts 1.5

JsFiddle: http://jsfiddle.net/XS4VE/

Things to consider:

division by zero
if the user gives you an integer instead of a fraction, or any other invalid input
rounding issues (like 1/3 for example)

answered Aug 22 '11 at 02:42

Matt Greer

60,826
17
123
123

Thanks. That's pretty slick. I'll keep it in mind if I ever need the full deal, but right now all I need is the `eval()` method. – ryanve Aug 22 '11 at 03:04
7

No need for *parseInt*, just use `split[0]/split[1]`. – RobG Aug 22 '11 at 04:08

score 7 · Answer 3 · answered Mar 20 '15 at 16:11

I have a function I use to handle integers, mixed fractions (including unicode vulgar fraction characters), and decimals. Probably needs some polishing but it works for my purpose (recipe ingredient list parsing).

NPM
GitHub

Inputs "2 1/2", "2½", "2 ½", and "2.5" will all return 2.5. Examples:

var numQty = require("numeric-quantity");

numQty("1 1/4") === 1.25;  // true
numQty("3 / 4") === 0.75;  // true
numQty("¼" ) === 0.25;     // true
numQty("2½") === 2.5;      // true
numQty("¾") === 0.75;      // true
numQty("⅓") === 0.333;     // true
numQty("⅔") === 0.667;     // true

One thing it doesn't handle is decimals within the fraction, e.g. "2.5 / 5".

score 6 · Answer 4 · edited May 08 '18 at 22:24

I created a nice function to do just that, everything was based off of this question and answers but it will take the string and output the decimal value but will also output whole numbers as well with out errors

https://gist.github.com/drifterz28/6971440

function toDeci(fraction) {
    fraction = fraction.toString();
    var result,wholeNum=0, frac, deci=0;
    if(fraction.search('/') >=0){
        if(fraction.search('-') >=0){
            wholeNum = fraction.split('-');
            frac = wholeNum[1];
            wholeNum = parseInt(wholeNum,10);
        }else{
            frac = fraction;
        }
        if(fraction.search('/') >=0){
            frac =  frac.split('/');
            deci = parseInt(frac[0], 10) / parseInt(frac[1], 10);
        }
        result = wholeNum+deci;
    }else{
        result = fraction
    }
    return result;
}

/* Testing values / examples */
console.log('1 ',toDeci("1-7/16"));
console.log('2 ',toDeci("5/8"));
console.log('3 ',toDeci("3-3/16"));
console.log('4 ',toDeci("12"));
console.log('5 ',toDeci("12.2"));

score 6 · Answer 5 · edited Aug 22 '11 at 02:43

6

Something like this:

bits = fraction.split("/");
return parseInt(bits[0],10)/parseInt(bits[1],10);

edited Aug 22 '11 at 02:43

Paul

139,544
27
275
264

answered Aug 22 '11 at 02:40

Coomie

4,832
3
32
44

Fabricio Mendonça · Answer 6 · 2018-03-15T09:38:27.463

4

Too late, but can be helpful:

You can use Array.prototype.reduce instead of eval https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

ES6

const fractionStrToDecimal = str => str.split('/').reduce((p, c) => p / c);
console.log(fractionStrToDecimal('1/4/2')); // Logs 0.125
console.log(fractionStrToDecimal('3/2')); // Logs 1.5

CJS

function fractionStrToDecimal(str) {
  return str.split('/').reduce((p, c) => p / c);
}
console.log(fractionStrToDecimal('1/4')); // Logs 0.25

[EDIT] Removed reducer initial value and now the function works for numerators greater than 1. Thanks, James Furey.

edited Mar 15 '18 at 09:38

answered Nov 20 '17 at 23:42

Fabricio Mendonça

51
2

Doesn't work for numerators greater than 1 (e.g. '3/2'). – James Furey Mar 12 '18 at 23:42
1

You are right. Just removed the reducer initial value and it is working now. Thanks! – Fabricio Mendonça Mar 14 '18 at 00:53

score 3 · Answer 7 · answered Mar 13 '18 at 00:03

Function (ES6):

function fractionToDecimal(fraction) {
  return fraction
    .split('/')
    .reduce((numerator, denominator, i) =>
      numerator / (i ? denominator : 1)
    );
}

Function (ES6, condensed):

function fractionToDecimal(f) {
  return f.split('/').reduce((n, d, i) => n / (i ? d : 1));
}

Examples:

fractionToDecimal('1/2');     // 0.5
fractionToDecimal('5/2');     // 2.5
fractionToDecimal('1/2/2');   // 0.25
fractionToDecimal('10/5/10'); // 0.2
fractionToDecimal('0/1');     // 0
fractionToDecimal('1/0');     // Infinity
fractionToDecimal('cat/dog'); // NaN

score 2 · Answer 8 · answered Sep 26 '22 at 00:02

With modern destructuring syntax, the best/safest answer can be simplified to:

const parseFraction = fraction => {
  const [numerator, denominator] = fraction.split('/').map(Number);
  return numerator / denominator;
}

// example
parseFraction('3/2'); // 1.5

In other words, split the faction by its / symbol, turn both resulting strings into numbers, then return the first number divided by the second ...

... all with only two (very readable) lines of code.

score 1 · Answer 9 · answered Jan 30 '18 at 12:27

If you don't mind using an external library, math.js offers some useful functions to convert fractions to decimals as well as perform fractional number arithmetic.

console.log(math.number(math.fraction("1/3"))); //returns 0.3333333333333333
console.log(math.fraction("1/3") * 9) //returns 3

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.20.1/math.js"></script>

score 1 · Answer 10 · answered Jan 12 '20 at 19:04

const fractionStringToNumber = s => s.split("/").map(s => Number(s)).reduce((a, b) => a / b);

console.log(fractionStringToNumber("1/2"));
console.log(fractionStringToNumber("1/3"));
console.log(fractionStringToNumber("3/2"));
console.log(fractionStringToNumber("3/1"));
console.log(fractionStringToNumber("22/7"));
console.log(fractionStringToNumber("355 / 113"));
console.log(fractionStringToNumber("8/4/2"));

console.log(fractionStringToNumber("3")); // => 3, not "3"

score 1 · Answer 11 · answered Mar 18 '20 at 16:37

From a readability, step through debugging perspective, this may be easier to follow:

// i.e. '1/2' -> .5
// Invalid input returns 0 so impact on upstream callers are less likely to be impacted
function fractionToNumber(fraction = '') {
    const fractionParts = fraction.split('/');
    const numerator = fractionParts[0] || '0';
    const denominator = fractionParts[1] || '1';
    const radix = 10;
    const number = parseInt(numerator, radix) / parseInt(denominator, radix);
    const result = number || 0;

    return result;
}

This code a good starting point depending how resilient/defensive/predictable you want to make it. This function screams unit testing to assert it works correctly in the scenarios you expect to handle. — Christopher Fahey, Mar 18 '20 at 16:40

score 0 · Answer 12 · answered Feb 20 '13 at 00:28

0

To convert a fraction to a decimal, just divide the top number by the bottom number. 5 divided by 3 would be 5/3 or 1.67. Much like:

function decimal(top,bottom) {
    return (top/bottom)
}

Hope this helps, haha

answered Feb 20 '13 at 00:28

DDPWNAGE

11

score 0 · Answer 13 · answered Jan 21 '14 at 12:55

0

It works with eval() method but you can use parseFloat method. I think it is better! Unfortunately it will work only with that kind of values - "12.2" not with "5/8", but since you can handle with calculation I think this is good approach!

answered Jan 21 '14 at 12:55

Kaloyan Stamatov

3,894
1
20
30

Robert Eisele · Answer 14 · 2015-06-04T12:23:23.847

0

If you want to use the result as a fraction and not just get the answer from the string, a library like https://github.com/infusion/Fraction.js would do the job quite well.

var f = new Fraction("3/2");
console.log(f.toString()); // Returns string "1.5"
console.log(f.valueOf()); // Returns number 1.5

var g = new Fraction(6.5).div(.5);
console.log(f.toString()); // Returns string "13"

edited Jun 04 '15 at 12:23

answered Jun 04 '15 at 11:31

Robert Eisele

109
6

score 0 · Answer 15 · answered Jul 25 '18 at 21:40

Also a bit late to the party, but an alternative to eval() with less security issues (according to MDN at least) is the Function() factory.

var fraction = "3/2";
console.log( Function("return (" + fraction + ");")() );

This would output the result "1.5" in the console.

Also as a side note: Mixed fractions like 1 1/2 will not work with neither eval() nor the solution with Function() as written as they both stumble on the space.

score 0 · Answer 16 · answered Mar 03 '19 at 00:56

safer eval() according to MDN

const safeEval = (str) => {
   return Function('"use strict";return (' + str + ")")();
}

safeEval("1 1/2") // 1.5

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval#Do_not_ever_use_eval!

score 0 · Answer 17 · edited Jul 02 '19 at 14:19

0

This too will work:

let y = "2.9/59"
let a = y.split('')
let b = a.splice(a.indexOf("/"))
console.log(parseFloat(a.join('')))
a = parseFloat(a.join(''))
console.log(b)
let c = parseFloat(b.slice(1).join(''))
let d = a/c
console.log(d) // Answer for y fraction

edited Jul 02 '19 at 14:19

Stephen Kennedy

20,585
22
95
108

answered Jul 02 '19 at 14:18

Muks123

9
2

Janine White · Answer 18 · 2021-03-18T19:32:19.020

I developed a function to convert a value using a factor that may be passed as a fraction of integers or decimals. The user input and conversion factor might not be in the correct format, so it checks for the original value to be a number, as well as that the conversion can be converted to a fraction assuming that /number means 1/number, or there are a numerator and a denominator in the format number/number.

/**
 * Convert value using conversion factor
 * @param {float} value - number to convert
 * @param {string} conversion - factor
 * @return {float} converted value
 */
function convertNumber(value, conversion) {
  try {
    let numberValue = eval(value);
    if (isNaN(numberValue)) {
      throw value + " is not a number.";
    }
    let fraction = conversion.toString();
    let divider = fraction.indexOf("/");
    let upper = 1;
    let denominator = 1;
    if (divider == -1) {
      upper = eval(fraction);
    } else {
      let split = fraction.split("/");
      if (split.length > 2) {
        throw fraction + " cannot be evaluated to a fraction.";
      } else {
        denominator = eval(split[1]);
        if (divider > 0) {
          upper = eval(split[0]);
        }
      }
    }
    let factor = upper/denominator;
    if (isNaN(factor)) {
      throw fraction + " cannot be converted to a factor.";
    }
    let result = numberValue * factor;
    if (isNaN(result)) {
      throw numberValue + " * " + factor + " is not a number.";
    }
    return result
  } catch (err) {
    let message = "Unable to convert '" + value + "' using '" + conversion + "'. " + err;
    throw message;
  }
}

score 0 · Answer 19 · answered Aug 27 '22 at 02:37

0

You can use eval() with regex to implement a secure method to calculate fraction

var input = "1/2";
return input.match(/^[0-9\/\.]+$/) != null ? eval(input) : "invalid number";

answered Aug 27 '22 at 02:37

Ramkumar G

415
1
8

Convert Fraction String to Decimal?

19 Answers19

Linked