Contents
  1. 1. Primitive Types
  2. 2. String
  3. 3. Date Object
  4. 4. Type Check
  5. 5. Type Format
    1. 5.1. String Format
    2. 5.2. Number Format
    3. 5.3. Date Format
  6. 6. Type Conversion
  7. 7. Deep Copy

Primitive Types

  • number
  • string
  • boolean
  • bigint
  • symbol
  • null
  • undefined

String

Multiple line strings

1
2
3
4
5
6
7
8
9
let multipleLineStr = `hello
world
`;
// or
let multipleLineStr2 = 'hello\n'+
'world';
// or
let multipleLineStr3 = 'hello\n\
world';

Remove HTML tags from a string

1
2
3
let htmlStr = "<div><a href='baidu.com'>test</a></div>";
htmlStr = htmlStr.replace(/<\/?[^>]+(>|$)/g, "");
console.log(htmlStr) // test

Replace newline with <br>

1
2
3
4
5
6
let str = `hello
world
JS`;
str.replace(/(\r|\n|\r\n)/g, "<br>");
// or
str.replaceAll("\r", "<br>").replaceAll("\n", "<br>").replaceAll("\r\n", "<br>");

Date Object

date to timestamp

1
const timestamp = new Date().getTime();

timestamp to date

1
const date = new Date(timestamp)

Type Check

Check null or undefined

1
value == null

Check undefined

1
typeof value === 'undefined'

Check null

1
value === null

Check string type

1
typeof value === 'string' || value instanceof String

Check number type

1
typeof value === 'number'

Check object or JSON object

1
typeof json === "object" && !Array.isArray(value)

Check array or JSON array type

1
2
let value = [1, 2, 3];
typeof value === "object" && Array.isArray(value);

Check date object type

1
2
let date = new Date();
Object.prototype.toString.call(date) === '[object Date]'

Check function

1
2
let obj = ()=>{ console.log("I'm a arrow function") };
typeof obj === 'function'

Type Format

String Format

String format

1
2
3
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
let resolution = `your screen resolution is ${width} * ${height}`

String Format with regular expressions

1
2
3
let str = 'My Name is ${name}. His name is ${name}';
let replacement = "John";
str.replace(/${\w}/, replacement);

Add leading zero

1
2
3
let date = 1;
let totalLenght = 2;
let result = String(date).padStart(totalLength, '0'); // '01'
1
2
3
4
5
function pad(num, size) {
num = num.toString();
while (num.length < size) num = "0" + num;
return num;
}

Number Format

1
2
let num = 34.7698;
let numFixed = num.toFixed(2);

Date Format

using slice

1
2
// date object to UTC datetime string yyyy/MM/dd HH:mm:ss
const str = (new Date()).toISOString().slice(0, 19).replace(/-/g, "/").replace("T", " ");
1
2
3
4
5
// date object to local time string yyyy/MM/dd HH:mm:ss
const now = new Date();
const offsetMs = now.getTimezoneOffset() * 60 * 1000;
const dateLocal = new Date(now.getTime() - offsetMs);
const str = dateLocal.toISOString().slice(0, 19).replace(/-/g, "/").replace("T", " ");

Using date object properties

1
2
3
4
5
6
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();

today = mm + '/' + dd + '/' + yyyy;

Type Conversion

Number to String

1
2
let num = 1;
let reslut = num.toString() // '1'
1
2
let num = 1;
let reslut = num + ''; // '1'

String to Number

  • parseInt(string, radix)
  • Number(string)
1
2
let s = "1";
let reslut = parseInt(s); // 1
1
2
let s = "1";
let reslut = Number(s); // 1

String to Float Number

  • parseFloat()

Deep Copy

Using JSON.stringify() and JSON.parse()

  • Pros: deep copies nested objects
  • Cons: doesn’t copy functions
1
let clone = JSON.parse(JSON.stringify(object));

Using Object.assign()

  • Pros: copies the immediate members of an object—including functions.
  • Cons: doesn’t deep copy nested objects
1
let clone = Object.assign({}, object);

Using spread operator

  • Pros: simple syntax, the preferred way to copy an object
  • Cons: doesn’t deep copy nested objects
1
const clone = {...object}

Using lodash

  • Pros: clones nested objects including functions
  • Cons: adds an external dependency to your project
1
var clone = _.cloneDeep(object);
Contents
  1. 1. Primitive Types
  2. 2. String
  3. 3. Date Object
  4. 4. Type Check
  5. 5. Type Format
    1. 5.1. String Format
    2. 5.2. Number Format
    3. 5.3. Date Format
  6. 6. Type Conversion
  7. 7. Deep Copy