• Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.
  • This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

background

On the first day of work after the National Day holiday, when everyone was still immersed in the happiness of the National Day holiday, I was brought back to reality by the urgent phone call from the business department. There were empty pages and data in the production environment, but they were all fine before the holiday.

This is strange, after a National Day, this bug flashed out?

Time to format the pot

Trying to reason

From the appearance, there is no data back in the background, but in fact there is a problem with the time transfer in the foreground.

In the following request, the date field should be 20211011, but how can it be 2042?

After one National Day, the year 2021 becomes 2042?

Time formatting again

Below omit ten thousand seconds, after the front-end development check found the following code:

 // Omit 10,000 lines of code here
 let str = ""
 let endDateTime = new Date()
 str += endDateTime.getFullYear()
 + (endDateTime.getMonth() + 1 < 10 ? '0' + (endDateTime.getMonth() + 1) : endDateTime.getMonth() + 1)
 + (endDateTime.getDate() < 10 ? '0' + endDateTime.getDate() : endDateTime.getDate())
 
 let opt = {date: str,
           productNo: productNo};
 
 // There are ten thousand cows
Copy the code

Can the front-end gods look at the code above and see what’s wrong at a glance?

  • If you can see what goes wrong, you have a solid foundation.
  • If you can’t see it, or even debug it, it means you need to strengthen your foundation, and you may make similar mistakes.

This code seems to have been similar before, and will be described later as the first encounter with time formatting.

parsing

The endDatetime.getMonth () code returns the month index (October corresponds to 9), and 9+1=10 < 10 is a teradic expression condition

Ternary expression: (endDatetime.getMonth () +1 < 10 ? '0' + (endDateTime.getMonth() + 1) : endDateTime.getMonth() + 1) in10The month code becomes endDateTime.getMonth() +1So: STR =2021 + 9 + 1 + 11 = 2042
 
Copy the code

Why isn’t there a problem before October?

because9In month the ternary expression becomes:'0' + (endDateTime.getMonth() + 1JS converts the result to a string'09'
Copy the code

I have to admire the development students for successfully avoiding the BUG in September. As a result, both the students and testers could not detect the problem before, and the problem was exposed in October.

Problem solving

The fastest solution developed is to add an operation to turn the year into a string, so that there is no cumulative year, month and day error.

 / / to solve BUG
 str += endDateTime.getFullYear() + ' ' // Add an empty string here
 + (endDateTime.getMonth() + 1 < 10 ? '0' + (endDateTime.getMonth() + 1) : endDateTime.getMonth() + 1)
 + (endDateTime.getDate() < 10 ? '0' + endDateTime.getDate() : endDateTime.getDate())
Copy the code

I recommend either writing a robust public time formatter class or referring to a mature external time formatter class such as moment.js

 / / import http://cdn.staticfile.org/moment.js/2.24.0/moment.js
 this.date = moment().format('YYYYMMDD');
 // Output: 20211011
Copy the code

Recall the first time and time formatting encounter

Memories are always sad.

The first encounter with the time formatting bug occurred on New Year’s Day 2020.

When many of my colleagues were at home celebrating the New Year, they suddenly reported problems, saying that the time on the page was wrong.

Time gave us a surprise, which should be the most unforgettable gift of New Year’s Day.

Or through the process of troubleshooting the problem – locating the problem, and finally front-end development yuan found the following secret:

 // first omit ten thousand words god attached
 let mydate = new Date(a)let date = mydate.getFullYear() + The '-' +
   (mydate.getMonth() + 1> =10 ? mydate.getMonth() + 1 : '0' + mydate.getMonth() + 1)
 
 this.setData({
    mydate: date
 })
Copy the code

For this bug analysis, you are welcome to give your opinion in the comment section.

“Nuggets will be raking in 100 nuggets nuggets in the comments section after project Diggnation. See the event article for details.”

History is always surprisingly similar, did not expect this time encountered this time formatting bug.

PS: This is not the same programmer’s egg.

revelation

  1. JavaScript is a weakly typed language that does not force the developer to specify the type of data in advance, so at any time a developer’s oversight can lead to code processing going into unexpected branches, like the code above always converting between integers and strings. Strongly typed languages like Java add some constraints and don’t arbitrarily change data types. In addition, use the parentheses accurately.
  2. For novice programmers, do not believe the code on the Internet, more understanding of the principle of each method and grammar, with mature tool classes will not write their own, to smart lazy.
  3. One cannot step twice into the same riverBut two programmers can create the same Bug, so are you really wasting time formatting now reading this article?

I’m Pandas. I’m dedicated to sharing Java/JS and other programming techniques.

If you find this post useful, don’t forget to like it and follow it!