encodeURI vs encodeURIComponent

Javascript provides some very similar APIs (functions) like
encodeURI vs encodeURIComponent
decodeURI vs decodeURIComponent
substr vs substring

Here are some testings to help understand the difference

encodeURI('http://www.google.com')
"http://www.google.com"
encodeURIComponent('http://www.google.com')
"http%3A%2F%2Fwww.google.com"

encodeURIComponent(";,/?:@&=+$#-_.!~*'()")
"%3B%2C%2F%3F%3A%40%26%3D%2B%24%23-_.!~*'()"
encodeURI(";,/?:@&=+$#-_.!~*'()")
";,/?:@&=+$#-_.!~*'()"

encodeURI("中文")
"%E4%B8%AD%E6%96%87"
encodeURIComponent("中文")
"%E4%B8%AD%E6%96%87"

The substring() method returns a subset of a string between one index and another, or through the end of the string.
str.substring(indexA[, indexB])

The substr() method returns the characters in a string beginning at the specified location through the specified number of characters, or the end of the string.
str.substr(start[, length])