Meningkatkan JavaScript Regex untuk Pemformatan Nombor Selamat

Mengurangkan risiko keselamatan dalam pemformatan nombor dengan JavaScript

Mengendalikan bilangan besar dalam JavaScript sering memerlukan pemformatan untuk meningkatkan kebolehbacaan, seperti memasukkan koma untuk beribu -ribu. Ramai pemaju menggunakan ungkapan biasa (REGEX) untuk mencapai matlamat ini, tetapi beberapa corak boleh membawa kepada kelemahan keselamatan. ⚠️

Sebagai contoh, regex / b (? = ( D {3})+(?! D)) /g efektif format nombor tetapi ditandai oleh sonarqube kerana potensi masalah runtime super linear. Ini boleh menyebabkan kemerosotan prestasi atau bahkan mendedahkan aplikasi untuk serangan penafian (DOS).

Bayangkan laman web e-dagang yang memaparkan angka harga yang besar seperti 1,234,567. Sekiranya regex yang tidak selamat digunakan, input pengguna mudah boleh mencetuskan mundur yang berlebihan, melambatkan seluruh tapak. Ini menekankan pentingnya menggunakan pendekatan yang selamat dan cekap. 🛠️

Jadi, bagaimanakah kita boleh memformat nombor dengan selamat sambil mengelakkan perangkap prestasi? Dalam artikel ini, kami akan meneroka penyelesaian alternatif yang mengekalkan keselamatan dan kecekapan tanpa menjejaskan fungsi.

Mengoptimumkan pemformatan nombor untuk prestasi dan keselamatan

Dalam JavaScript, memformat bilangan besar dengan koma meningkatkan kebolehbacaan, tetapi beberapa ungkapan biasa dapat memperkenalkan kelemahan keselamatan. The Regex / B (? = ( D {3})+(?! D))/g biasanya digunakan tetapi mempunyai masalah prestasi disebabkan oleh mundur yang berlebihan. Untuk menangani perkara ini, kami meneroka alternatif yang lebih selamat, termasuk Intl.NumberFormat, regex halus, dan pendekatan berasaskan gelung. Setiap kaedah memastikan nombor seperti 1234567 dipaparkan sebagai 1,234,567 tanpa menjejaskan kecekapan.

The Intl.NumberFormat Kaedah adalah yang paling dipercayai kerana ia secara langsung memanfaatkan API pengantarabangsaan terbina dalam JavaScript. Ia menghapuskan risiko pemprosesan yang berlebihan semasa menyediakan pemformatan berasaskan locale. Penyelesaian Regex yang ditapis menghilangkan pandangan yang tidak perlu, menjadikannya lebih efisien dan kurang cenderung runtime super linear isu. Sementara itu, pendekatan berasaskan gelung secara manual memasukkan koma pada kedudukan yang betul, memastikan kawalan penuh ke atas pemformatan tanpa bergantung pada regex.

Untuk pelaksanaan backend, kami mencipta API Express.js yang memproses input berangka dan mengembalikan hasil yang diformat. Pendekatan ini memastikan data disahkan sebelum diproses, mencegah potensi ancaman keselamatan. Untuk mengesahkan penyelesaian kami, kami melaksanakan ujian unit jest, memeriksa beberapa kes untuk menjamin ketepatan. Ini memastikan sama ada pengguna input 1000 atau 1000000, output tetap konsisten dan diformat dengan betul. ⚡

Dengan menggunakan kaedah ini, kami meningkatkan keselamatan dan prestasi, memastikan pemformatan nombor tetap cekap dalam pelbagai persekitaran. Sama ada untuk permohonan kewangan, harga e-dagang, atau pengiraan backend, penyelesaian ini memberikan alternatif yang teguh kepada pendekatan regex-berat. Eksplorasi ini menyoroti bagaimana tugas pemformatan yang mudah dapat mempunyai implikasi yang mendalam untuk keselamatan dan prestasi, menjadikannya penting untuk memilih kaedah yang tepat. 🚀

// Approach 1: Using Intl.NumberFormat (Best Practice)
function formatNumberIntl(num) {
    return new Intl.NumberFormat('en-US').format(num);
}
console.log(formatNumberIntl(1234567)); // Output: "1,234,567"

// Approach 2: Using a Safe Regex
function formatNumberRegex(num) {
    return num.toString().replace(/\d(?=(\d{3})+$)/g, '$&,');
}
console.log(formatNumberRegex(1234567)); // Output: "1,234,567"

// Approach 3: Using a Loop for Performance Optimization
function formatNumberLoop(num) {
    let str = num.toString().split('').reverse();
    for (let i = 3; i < str.length; i += 4) {
        str.splice(i, 0, ',');
    }
    return str.reverse().join('');
}
console.log(formatNumberLoop(1234567)); // Output: "1,234,567"

const express = require('express');
const app = express();
app.use(express.json());

// API route for formatting numbers
app.post('/format-number', (req, res) => {
    const { number } = req.body;
    if (typeof number !== 'number') return res.status(400).json({ error: "Invalid input" });
    const formattedNumber = new Intl.NumberFormat('en-US').format(number);
    res.json({ formattedNumber });
});

app.listen(3000, () => console.log('Server running on port 3000'));

const { formatNumberIntl, formatNumberRegex, formatNumberLoop } = require('./numberFormatter');

test('Formats number correctly using Intl.NumberFormat', () => {
    expect(formatNumberIntl(1234567)).toBe("1,234,567");
});

test('Formats number correctly using Regex', () => {
    expect(formatNumberRegex(1234567)).toBe("1,234,567");
});

test('Formats number correctly using Loop', () => {
    expect(formatNumberLoop(1234567)).toBe("1,234,567");
});

Memastikan prestasi dan keselamatan dalam pemformatan nombor JavaScript

Di luar regex dan kaedah terbina dalam, satu lagi aspek kritikal pemformatan nombor dalam JavaScript adalah mengendalikan data berskala besar dengan cekap. Semasa bekerja dengan dataset besar, memohon Pemformatan nombor Secara dinamik boleh memperkenalkan kesesakan prestasi. Fungsi yang tidak dioptimumkan dapat melambatkan rendering halaman, terutama ketika memformat nombor di dalam gelung atau memaparkannya secara dinamik dalam aplikasi masa nyata.

Satu alternatif ialah menggunakan memoisasi, hasil diformat caching untuk mencegah perhitungan berlebihan. Sekiranya nombor telah diformat sekali, menyimpannya membolehkan permintaan seterusnya untuk mendapatkan nilai dengan serta -merta. Ini amat berguna untuk papan pemuka yang memaparkan data kewangan, harga saham, atau platform e-dagang di mana Kemas kini nombor masa nyata berlaku dengan kerap. Dengan mengurangkan pengiraan yang berlebihan, kami meningkatkan kelajuan dan memastikan pengalaman pengguna yang lebih lancar. ⚡

Di samping itu, rangka kerja pelanggan seperti React dan VUE menyediakan kaedah khusus untuk mengendalikan nombor diformat dengan cekap. Menggunakan React useMemo atau sifat yang dikira oleh Vue memastikan pemformatan dikira semula hanya apabila perlu. Pendekatan ini, digabungkan dengan caching sisi belakang (mis., Menggunakan redis atau storan tempatan), dengan ketara meningkatkan kelajuan dan skalabilitas aplikasi yang sangat bergantung pada pemformatan nombor. 🚀