DEV Community: khalid ansari

JavaScript replace a powerful tool to manipulate string

khalid ansari — Sun, 05 Sep 2021 14:55:03 +0000

Javascript replace is the most powerful tool to manipulate string and regex at its core makes it really powerful. We will deep dive into examples from basic to advance.

Replace all the occurrence of space with an underscore, a simplest use case.

const str = 'remove all the space with underscore'
str.replace(/ /g, '_')

// remove_all_the_space_with_underscore

Replace all the number from 0 to 5 with @

const str = 'replace 1 3 5 9 all 0 to 5 number with @'
str.replace(/[0-5]/g, '@')

// replace @ @ @ 9 all @ to @ number with @

Replace all the numbers between 0 to 5 with its square.

const str = 'replace 1 3 5 7 all 0 to 5 number with its square'

str.replace(/([0-5])/g, (match, id) => {
 return id*id 
})

// replace 1 9 25 9 7 all 0 to 25 number with its square

You can write your own replacer function and return manipulated data. Even manipulate date inside string or deal with emoji.

Some fun

const str = 'cry replace with smile'
str.replace(/ /g, ' ')

// 'cry replace with smile'

Thank you for reading.

Easiest way to understand Javascript Closure

khalid ansari — Fri, 20 Aug 2021 17:36:35 +0000

Closure is one most discussed topics in javascript for many reasons, but I am going to make it simple to understand. First we will look at the definition of Closure from MDN.

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state

Let break it down with the most familiar example.

--Home
  --Bedroom
  --Office Room
  --Kitchen
    --Fridge
      --Penguin

Let look at the above structure, A home, and inside it a Bedroom, an Office room since its 2021, and Kitchen. Also, there is a Fridge inside the kitchen. Now consider there is a penguin in the fridge, yay yay they came back due to global warming.

function Home() {
  function OfficeRoom(){
    console.log('OfficeRoom')
  }

  function Bedroom(){
    var bed = "bed"
    console.log('Bedroom')
  }

  function Kitchen() {
    var oven = "oven"

    function Fridge() {
      var bread = "bread"

      function Penguin() {
        console.log(bread, oven, Bedroom(), OfficeRoom())
      }
      Penguin()
    }
    Fridge()
  }
  Kitchen()
}
Home()

what `Penguin()` function can access?

The above is what I converted in javascript code. Let see what penguin has access to

Everything in fridge
Everything in Kitchen
Everything in Home

Let go from the top, can penguin access the office room, in real-world it can access and may fix some of your bugs, But in the javascript world, it can only call OfficeRoom() since its a function and it can return anything, same goes for Bedroom().

Moving to Kitchen() it can access oven variable and in Fridge() it can access bread variable.

Now let's look at the definition of closure

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state

The Kitchen() function bundled together with reference to its surrounding state that is Bedroom() and OfficeRoom().
The Fridge() function bundled together with reference to its surrounding state that is oven. And everything it has referenced from Home().
The Penguin() function bundled together with reference to its surrounding state that is bread. And everything it has referenced from Fridge().

In hierarchy it will bundle reference to function until Global scope.

Now we have three closure, and let see what chrome dev tool says.

Every function that bundled together with references to its surrounding state is closure. In fact, closure is created every time a function is created.

For more read https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

Intl Number and its uses

khalid ansari — Tue, 17 Aug 2021 17:10:58 +0000

Intl API has been a good new addition on web for internationalisation. We are going to looking into some of the cool examples. Let’s start first with number

Number can be categorised in four and it cover extensively decimal, percent, unit and currency. We are going to look into example of each one.

Decimal

It will format the style in Indian like how we format thousand/lakh/crore.

(1134554.1234).toLocaleString('en-IN', {
  style: 'decimal',
})

// 11,34,554.123

Format to show the number in Devanagari, a numbering system that was used in India, and still used by some people.

(1134554.1234).toLocaleString('en-IN', {
  style: 'decimal', 
  numberingSystem: 'deva'
})

// ११,३४,५५४.१२३

The Intl support several numbering system like following show in arabic.

(1134554.1234).toLocaleString('en-IN', {
  style: 'decimal', 
  numberingSystem: 'arab'
})

// ١١٬٣٤٬٥٥٤٫١٢٣

Percent

It has simplistic use, format the number in passed locale and include percent, like following for Spanish.

(1134554.1234).toLocaleString('es', {
  style: 'percent',
})

// 113.455.412 %

This has support of numbering multiple numbering system also, like following for arabic.

(1134554.1234).toLocaleString('en-GBP', {
  style: 'percent', 
  numberingSystem: 'arab'
})

// ١١٣٬٤٥٥٬٤١٢٪؜؜

Currency

It has been long due for formatting any amount in its local currency.

It will format the amount 11 to show with EUR sign.

(11).toLocaleString('es', {
  style: 'currency',
  currency: 'EUR',
})

// 11,00 €

It is going to show the amount with rupee sign.

(11).toLocaleString('en-IN', {
  style: 'currency',
  currency: 'INR'
})

// ₹11.00

Unit

Its is pretty extensive and has wide use case let go by example

(11).toLocaleString('en-IN', {
  style: 'unit',
  unit: 'pound', 
  unitDisplay: 'long'
})

// 11 Pounds

The result will be 11 Pound but you can change unitDisplay like ‘long’, ‘short’ and ‘narrow’

Long - 11 Pounds
Short - 11 lb
Narrow - 11lb

You can customise to show unit, also check this link for the list of unit that it accept

(1024).toLocaleString('en-IN', {
  style: 'unit',
  unit: 'megabyte-per-gigabyte',
  unitDisplay: 'narrow'
})

// 1,024MB/GB

Intl offer per to concatenate any unit to show like 1,024MB/GB. For example fahrenheit-per-degree, hour-per-kilometer you can build more using two different or same unit.

Useful property

minimumIntegerDigits

You can pass minimum number of integer for example

(123).toLocaleString('en-IN', {
  style: 'decimal',
  minimumIntegerDigits: '10'
})

// 0,00,00,00,123

its going to show minimum 10 digit before fraction even if it has to include several zero

minimumFractionDigits

(123).toLocaleString('en-IN', {
  style: 'decimal',
  minimumFractionDigits: '10'
})

// 123.0000000000

It will show the minimum fraction in even if has to include zero. It also has limit that you can’t include more than 20.

maximumFractionDigits

(3.14159).toLocaleString('en-IN', {
  style: 'decimal',
  maximumFractionDigits: '2'
})

// 3.14

It will include only minimum number defined like we use in toFixed()

Thanks for reading this so far.

Intl Date and its uses

khalid ansari — Tue, 17 Aug 2021 09:47:00 +0000

The Intl new adding to ECMAScript Internationalization API, has made a lot easier for developer to formatting and comparison of date, number and show on. In this blog will only talk date and its uses.

new Date() has been used in code so when you will run it, result will different but format will remain same.

Localisation of Date

new Date().toLocaleDateString('en-IN', {
    month: 'long', 
    day: '2-digit', 
    year: 'numeric'
})

// 15 August 2021

Lets convert it into Spanish

new Date().toLocaleDateString('es', {
    month: 'long', 
    day: '2-digit', 
    year: 'numeric'
})

// 15 de agosto de 2021

Just one change made it to show in Spanish, there are numbers of language it supports.

Time

new Date().toLocaleTimeString('en-IN', {
    hour: 'numeric', 
    minute: 'numeric', 
    timeZoneName: 'short', 
    hour12: false
})

// 20:41 IST

We have addd timezone and asked to only show 24 hour format. You can also include timeZoneName short and long.

Let get the time in 12 hours format

new Date().toLocaleTimeString('en-IN', {
    hour: 'numeric', 
    minute: 'numeric'
})

// 8:43 pm

By default Intl will show 12 hour format.

Get Weekday

new Date().toLocaleTimeString('en-IN', {
    hour: 'numeric', 
    minute: 'numeric',  
   weekday: 'long'
})

// Sunday, 8:49 pm

Timezone

Get time of CET, you can pass any timezone to get time.


new Date().toLocaleTimeString('en-IN', {
    hour: 'numeric', 
    minute: 'numeric', 
    timeZone: 'CET'
})

// 5:46 pm