I recently received a new requirement to implement a dynamic entry form that is mostly numeric and has some fields that are related. For example, three fields field1, field2, field3 might have the following relationship: field3 = field1 + field2. And then the back end will give you this expression, and the front end will evaluate it automatically.

You might think, well, if you’re listening for a form value change, depending on the field change, just replace the field name string in the expression with the actual value, and then eval it. This is exactly what I did at first, but the accuracy of JS gave me a kick:

If the values of the two fields are 0.1 and 0.2 respectively, the final computed result will be 0.30000000000000004. This is not acceptable in digital form entry. Simply multiplying by 100 and dividing by 100 is not feasible, and eval is inherently insecure.

Now looking back at the description above, we can summarize the problem into the following question (see the full implementation at the end of the article) :

/** * implements a function that takes expression templates and field values and evaluates the final result */
const templateCalc = (template, values) = > {
    // ...
}

templateCalc('(val1 + val2) / val3', { val1: 1.val2: 2.val3: 2 });
/ / 1.5
templateCalc('((val1 + val2) - val3 * val4) / val3', { val1: 1.val2: 2.val3: 2.val4: 10 });
// -8.5
templateCalc('val1 - val2', { val1: 0.3.val2: 0.2 });
/ / 0.1
templateCalc('(val1 + val2) / 10000', { val1: 100.val2: 5 });
/ / 0.0105
Copy the code

For accuracy, I chose big.js-NPM (nPMjs.com). The overall idea is as follows:

Unwrap the field names and operators in the template to parse the string into a token array
Process the token array into an inverse Polish expression
The inverse Polish expression is evaluated by replacing the field name with the actual value and importing big.js

Ok, step 1:

Parsing the template

The implementation is as follows:

// Matches the re of the parentheses of addition, subtraction, multiplication and division
const operatorReg = /[()+\-/* ]/g;

/** * process the template as a token array *@param {string} STR evaluates the expression template */
export const strToToken = str= > {
    // Extract all operands
    const keys = str.split(operatorReg);
    const tokens = [];
    let temp = str;
    // Parse the template
    while (temp.length > 0) {
        // Template starts with operand
        if (keys.length > 0 && temp.startsWith(keys[0])) {
            temp = temp.replace(keys[0].' ');
            tokens.push(keys.shift());
        }
        // The template begins with an operator
        else {
            tokens.push(temp[0]);
            temp = temp.substr(1); }}// Discard all whitespace characters in the template
    return tokens.filter(token= >token && token ! = =' ');
}
Copy the code

Instead of parsing the template directly, we split the template with the operator so that all that’s left is the operand, and then we match the operand to the template, and if we match the operand, we throw the operand to the last queue, and if we don’t match the operand, we throw the first character to the queue.

Converts to the inverse Polish expression

The implementation is as follows:

// Matches the re of the parentheses of addition, subtraction, multiplication and division
const operatorReg = /[()+\-/* ]/g;

/** * An infix expression is converted to an inverse Polish expression@param {string[]} TokenList infix expression token array */
const tokenToRpn = tokenList= > {
    if(! tokenList || tokenList.length <=0) return [];
    const operators = [];

    // Specifies whether the precedence of the operator is higher than that of the operator in the stack
    const isTokenHighRank = token= > {
        const operatorRand = { '+': 1.The '-': 1.The '*': 2.'/': 2 };
        const topOperator = operators[operators.length - 1];

        return operators.length === 0 ||
            topOperator === '(' ||
            operatorRand[token] > operatorRand[topOperator];
    }

    const outputs = tokenList.reduce((outputs, token) = > {
        // If it is a variable, print it directly
        if(! token.match(operatorReg)) outputs.push(token);// If it is an open parenthesis, go to the operator stack
        else if (token === '(') operators.push(token);
        // If it is a close parenthesis, pop the operator until it meets an open parenthesis
        else if (token === ') ') {
            while (operators.length > 0) {
                const operator = operators.pop();
                if (operator === '(') break; outputs.push(operator); }}// If it is an operator
        else {
            while (operators.length >= 0) {
                // Push the higher priority into the result
                if (isTokenHighRank(token)) {
                    operators.push(token);
                    break; } outputs.push(operators.pop()); }}returnoutputs; } []);return [...outputs, ...operators];
}
Copy the code

Pay attention to matching parentheses and precedence of operators. This implementation still feels a bit long, please let me know if there is a better conversion method.

Replace data and calculate

The implementation is as follows:

const Big = require('big.js');

/** * operator to actual operation */
const calculators = {
    '+': (num1, num2) = > (new Big(num1).plus(num2)),
    The '-': (num1, num2) = > (new Big(num1).minus(num2)),
    The '*': (num1, num2) = > (new Big(num1).times(num2)),
    '/': (num1, num2) = > (new Big(num1).div(num2))
}

/** * get the corresponding data from the dataset */
const getValues = (key, values) = > {
    if(! key)return 0;
    if (typeof key === 'string') return values[key] || Number(key) || 0;
    return key;
}

/** * populates and computes data *@param {string[]} Tokens RPN Token array *@param {object} Values dataset *@returns End result */
const calcRpn = (tokens, values) = > {
    let numarr = []
    for (const token of tokens) {
        const calculator = calculators[token];

        if(! calculator) numarr.push(token);else {
            // The order in which these two values are created cannot be changed, otherwise the pop values will be reversed
            const val2 = getValues(numarr.pop(), values);
            const val1 = getValues(numarr.pop(), values);
            constresult = calculator(val1, val2); numarr.push(result.toNumber()); }}return numarr.pop();
};
Copy the code

It is important to note that the first parameter to getValues receives a value that pops out of numarr, so it could be a field name field1, or it could be the actual value that has been calculated. So you need to determine the type. Another thing to note here is that when the key parameter value is of type string, it may not only be the name of a field, but also an operand in a template.

Complete sample

After these three steps have been completed, the rest of the process is ready to go. You can concatenate all three of them in sequence. Here is the complete example.

const Big = require('big.js');

// Matches the re of the parentheses of addition, subtraction, multiplication and division
const operatorReg = /[()+\-/* ]/g;

/** * process the template as a token array *@param {string} STR evaluates the expression template */
const strToToken = str= > {
    // Extract all operands
    const keys = str.split(operatorReg);
    const tokens = [];
    let temp = str;
    // Parse the template
    while (temp.length > 0) {
        // Template starts with operand
        if (keys.length > 0 && temp.startsWith(keys[0])) {
            temp = temp.replace(keys[0].' ');
            tokens.push(keys.shift());
        }
        // The template begins with an operator
        else {
            tokens.push(temp[0]);
            temp = temp.substr(1); }}// Discard all whitespace characters in the template
    return tokens.filter(token= >token && token ! = =' ');
}

/** * An infix expression is converted to an inverse Polish expression@param {string[]} TokenList infix expression token array */
const tokenToRpn = tokenList= > {
    if(! tokenList || tokenList.length <=0) return [];
    const operators = [];

    // Specifies whether the precedence of the operator is higher than that of the operator in the stack
    const isTokenHighRank = token= > {
        const operatorRand = { '+': 1.The '-': 1.The '*': 2.'/': 2 };
        const topOperator = operators[operators.length - 1];

        return operators.length === 0 ||
            topOperator === '(' ||
            operatorRand[token] > operatorRand[topOperator];
    }

    const outputs = tokenList.reduce((outputs, token) = > {
        // If it is a variable, print it directly
        if(! token.match(operatorReg)) outputs.push(token);// If it is an open parenthesis, go to the operator stack
        else if (token === '(') operators.push(token);
        // If it is a close parenthesis, pop the operator until it meets an open parenthesis
        else if (token === ') ') {
            while (operators.length > 0) {
                const operator = operators.pop();
                if (operator === '(') break; outputs.push(operator); }}// If it is an operator
        else {
            while (operators.length >= 0) {
                // Push the higher priority into the result
                if (isTokenHighRank(token)) {
                    operators.push(token);
                    break; } outputs.push(operators.pop()); }}returnoutputs; } []);return [...outputs, ...operators];
}

/** * operator to actual operation */
const calculators = {
    '+': (num1, num2) = > (new Big(num1).plus(num2)),
    The '-': (num1, num2) = > (new Big(num1).minus(num2)),
    The '*': (num1, num2) = > (new Big(num1).times(num2)),
    '/': (num1, num2) = > (new Big(num1).div(num2))
}

/** * get the corresponding data from the dataset */
const getValues = (key, values) = > {
    if(! key)return 0;
    if (typeof key === 'string') return values[key] || Number(key) || 0;
    return key;
}

/** * populates and computes data *@param {string[]} Tokens RPN Token array *@param {object} Values dataset *@returns End result */
const calcRpn = function(tokens, values) {
    let numarr = []
    for (const token of tokens) {
        const calculator = calculators[token];

        if(! calculator) numarr.push(token);else {
            // The order in which these two values are created cannot be changed, otherwise the pop values will be reversed
            const val2 = getValues(numarr.pop(), values);
            const val1 = getValues(numarr.pop(), values);
            constresult = calculator(val1, val2); numarr.push(result.toNumber()); }}return numarr.pop();
};

const templateCalc = (template, values) = > {
    const tokens = strToToken(template)
    const rpn = tokenToRpn(tokens)
    const result = calcRpn(rpn, values)

    return result
}

console.log(templateCalc('(val1 + val2) / val3', { val1: 1.val2: 2.val3: 2 }));
/ / 1.5
console.log(templateCalc('((val1 + val2) - val3 * val4) / val3', { val1: 1.val2: 2.val3: 2.val4: 10 }));
// -8.5
console.log(templateCalc('val1 - val2', { val1: 0.3.val2: 0.2 }));
/ / 0.1
console.log(templateCalc('(val1 + val2) / 10000', { val1: 100.val2: 5 }));
/ / 0.0105
Copy the code

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Use JS to achieve template calculation of addition, subtraction, multiplication and division

Parsing the template

Converts to the inverse Polish expression

Replace data and calculate

Complete sample

Use JS to achieve template calculation of addition, subtraction, multiplication and division

Parsing the template

Converts to the inverse Polish expression

Replace data and calculate

Complete sample

Related Posts

Comprehensive analysis of vue. nextTick implementation principle

Quick start Promise in JavaScript

TypeScript implements the observer pattern