JavaScript Code Examples: Types, Values, and Variables

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

let multipleLineStr = `hello
world
`;
// or
let multipleLineStr2 = 'hello\n'+
    'world';
// or
let multipleLineStr3 = 'hello\n\
world';

Remove HTML tags from a string

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

Replace newline with <br>

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

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

timestamp to date

const date = new Date(timestamp)

Type Check

Check null or undefined

value == null

Check undefined

typeof value === 'undefined'

Check null

value === null

Check string type

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

Check number type

typeof value === 'number'

Check object or JSON object

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

Check array or JSON array type

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

Check date object type

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

Check function

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

Type Format

String Format

String format

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

String Format with regular expressions

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

Add leading zero

let date = 1;
let totalLenght = 2;
let result = String(date).padStart(totalLength, '0'); // '01'

function pad(num, size) {
    num = num.toString();
    while (num.length < size) num = "0" + num;
    return num;
}

Number Format

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

Date Format

using slice

// date object to UTC datetime string yyyy/MM/dd HH:mm:ss
const str = (new Date()).toISOString().slice(0, 19).replace(/-/g, "/").replace("T", " ");

// 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

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

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

let num = 1;
let reslut = num + ''; // '1'

String to Number

• parseInt(string, radix)
• Number(string)

let s = "1";
let reslut = parseInt(s); // 1

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

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

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

const clone = {...object}

Using lodash

• Pros: clones nested objects including functions
• Cons: adds an external dependency to your project

var clone = _.cloneDeep(object);