# Intro String.
- String is basically text of information and must be wrapped in quotes. it works with both double quotes and single quotes.
- What is important is remaining consistance. In single JS file, you should not swich double to single quotes and vice versa. You should remain consistance.
- The only time you can mix with double and single quotes is you need to include one of them inside.
let string = 'I told her"go away"'; // mix together
# Indices and Length
- Strings are indexed. Each character has a corresponding index(a positional number).
- We start counting from Zero, left to right. Each charactor is associated with Index.
- We can actually access individual indices, individual characters based upon that index.
let animal = "Dumbo Octopus";
animal[0] // "D"
animal[1] // "u"
- What if I put a number that just doesn't exist? You just get 'undefined' primitive value. Basically Js is tryting of teliing us there isnt anything there and I don't know what you want.
- We usually use it to figure out what it is the first charactor or last charactor.
- The other thing you should know is that every string has its built-in magical property which is length.
animal.length // 13
- The highest index is always one less than length of string. Because index is always starting with 0.
- Strings can be concatenated. smushing togetehr two strings to get a new string.
"lol" + "lol" // "lollol"
- In memory, lowercase and uppercase are different thing. ex) River / river are different string in memory in JS. Cannot updeate one character by one manually. I can just overwrite the entire string to give it new value if I want.
- What if you combined a number and string? it is going to be string. JS trying to coerce these to a common type.
- Js doesn't add space between two strings when you combine them.
# String Methods
- Methods are built-in actions we can perform with individual strings.
- "string" . ______ : after . , you can see many methods on google chrome console. Also can check it out on MDN document.
- They help us do things like : Searching within a string / Replacing part of a string / Changing the casing of a string etc.
thing.method()
- You should type parentheses after method. Otherwise, it is not going to work.
let msg = "hey leave me alone";
msg.toUpperCase() // "HEY LEAVE ME ALONE"
let angryMsg = msg.toUpperCase()
angryMsg // "HEY LEAVE ME ALONE"
- It is non-distroyed method which means just capture that value and reflect its value.
- Trim : trim is going to trim off any white space on the at the beginning of a string or at the end. It is sometimes useful for getting input from a user. You're dealing with data that maybe you don't hav full control over and there might be extra indentation or space that you want to remove just to get to the core of a string.
- You can combine sevral methods together.
let greeting = " hi again";
gretting.trim().toUpperCase() //"HI AGAIN"
# Method arguements
things.method(arg)
- some methods accept arguments that modify their behavior. Think of them as inputs that we can pass in. We pass these arguments inside of the parenthese.
- It is not neccesary to do for all methods. But something like indexOf need to have arguments in parentheses.
- . indexOf() : is going to give us the string index and positional number where a given argument occur in a string.
let tvShow = 'catdog';
tvShow.indexOf('cat'); // 0
tvShow.indexOf('dog'); //3
tvShow.indexOf('z'); // -1 (not found)
- But it is not going to give you multiple matches. you can get just first math in a string.
"haha that is so funny!".indexOf("h"); // you can get only 0 cuz it is the first charactor in this string
- . slice() : slice can accept more than one argument. Slice is going to extract or slice a portion of a string and it returns it or it gives us as a new string.
things.slice(begin,end) //end is optional
"haha that is so funny".slice(5) // "that is so funny"
"haha that is so funny".slice(5 ,9) // "that"
- You can just pass it to begin index and that's how we tell Slice where to begin extraction.
- You can actaully pass in negative index. It gives me the last single character negative
- . replace () : You can use something called a regualr expression to match patterns and replace a pattern instead of a specific string
- We need to pass in two arguement. The first is what we are trying to replace , and then the second is what we want to replace it with.
- . repeat() : You can repeat strings.
"lol".repeat(2); //"lollol"
# Template Literals.
- Template literals are strings that allow embedded expressions, which will be evaluated and then turned into a resulting string.
- We use back-ticks, not single quotes.
- Whatever it is in curly braces is considered expression. With back-ticks, it is valuated in all content inside of curly braces.
`I counted ${3+4} sheep`; // "I counted 7 sheep"
let qty = 5;
product = 'artichoke';
"You bought " + qty + " " + product + ". Total is: " + price * qty
// "You bought 5 artichoke. Total is 11.25"
`You bought ${qty} ${product}. Total is: ${price*qty} `
- If you want to add extra $ sign, you can type double $$ sign.
- You can also add method. ex) ${product.toUpperCase()}
# Undefined / Null
- These concepts are simple compare to other primitive types.
- Null : "intentional absence of any value" . Must be assigned.
- Undefined : Variables that do not have an assigned value are undefined.
# Math object
- Contains properties and methods for mathematical sonstants and functions.
- You can learn about Math objects on MDN but we usually just use round / floor etc.
Math.floor(23.90) // 23 반내림
Math.ceil(34.1) // 35 반올림
- Math.random() : Math.random() gives us a random decimal between 0 and 1(non-inclusive).
- We can not get integer right away, so need some steps to get integer.
const step 1 = Math.random();
const step 2 = step1 * 10// 나오게 하고 싶은 숫자 범위만큼 곱함
const step 3 = Math.floor(step2);
const step 4 = step3 + 1; // 마지막 숫자가 나오게 하기위해서 +1
Math.floor(Math.random() * 10) + 1;
Math.floor(Math.random()* 3) + 20;
// 20-22사이의 숫자를 나오게 하려면 나오게해야하는 숫자 3 / + 20을 더해주면 됨
'Udemy - The web developer camp' 카테고리의 다른 글
JavaScript Arrays (0) | 2022.08.23 |
---|---|
Javascript Making decisions (0) | 2022.08.06 |
JavaScript (0) | 2022.07.30 |
가격표만들기 (0) | 2022.07.26 |
css 3 (flexbox) (0) | 2022.07.21 |
댓글