Objetos nativos Javascript

Nenhum produto encontrado nessa seleção.

Objetos nativos Javascript englobam praticamente tudo o que a linguagem nos oferece. Qualquer elemento se torna um objeto em Javascript, desde uma string primitiva (que é convertida em objeto quando necessário) até um array (que veremos mais adiante).

Na aula onde falamos sobre tipos de dados em Javascript, detalhamos os tipos de dados primitivos (string, number e boolean), porém, como estávamos falando em suas formas mais primitivas, não era interessante entrarmos com os objetos que os envolvem e suas propriedades naquele artigo.

Quando você cria uma variável do tipo string primitiva em Javascript:

var minha_variavel = 'Sou primitiva';

A primeira vez que você tentar acessar as propriedades (que ainda não existem) dessa string primitiva, o Javascript irá criar um objeto do tipo String, que vai envolver o valor da sua variável, utilizar as propriedades que você está tentando acessar, e, em seguida, vai descartar o objeto criado após acessar tal propriedade.

Isso é bastante confuso e acontece “por baixo dos panos“, mas é realmente o que acontece: tipos de dados primitivos string, number e boolean, não têm propriedades, ou seja, são simplesmente valores que o Javascript converte automaticamente se for necessário. Eles só passarão a ter propriedades quando convertidos para objetos.

Por exemplo:

var str = "Valor qualquer"; // String 
var obj = new String("Valor qualquer"); // Objeto String

// No fim, tudo acaba sendo a mesma coisa
document.writeln( str.toUpperCase() ); // VALOR QUALQUER
document.writeln( obj.toUpperCase() ); // VALOR QUALQUER

Apesar de ambas as variáveis acima trabalharem com o mesmo valor, elas não são necessariamente do mesmo tipo. A primeira é uma string primitiva e a segunda é um objeto, porém, se você acessar uma propriedade de uma string primitiva, ela é automaticamente convertida em objeto, a propriedade desse objeto é acessada e ele é descartado.

Isso acontece com todos os tipos de dados que não são criados explicitamente como objetos, strings, numbers e booleans.

Se você quiser criar objetos explicitamente em Javascript, use o seguinte:

/* Strings */
var variavel = new String("Valor da sua string."); // Object

/* Numbers */
var numero = new Number(11.50); // Object

/* Boolean */
var verdadeiro = new Boolean(true); // Object
var falso = new Boolean(); // Object

A palavra new é importante, pois, se você não utilizá-la, estará criando tipos de dados primitivos da mesma maneira:

/* Strings */
var variavel = String("Valor da sua string."); // String

/* Numbers */
var numero = Number(11.50); // Number

/* Boolean */
var verdadeiro = Boolean(true); // Boolean
var falso = Boolean(); // Boolean

Mas tenha em mente que não é totalmente necessário criar os objetos de maneira explicita, você ainda pode criar valores do tipo string, number e boolean da seguinte maneira:

/* Strings */
var variavel = "Valor da sua string."; // String

/* Numbers */
var numero = 11.50; // Number

/* Boolean */
var verdadeiro = true; // Boolean
var falso = false; // Boolean

O Javascript fará o trabalho de conversão em objetos quando necessário, não se preocupe.

Propriedades e métodos de Objetos nativos Javascript

Objetos têm propriedades e métodos que podem ser acessados através de um ponto (.) ao final do nome da variável, seguido do nome da propriedade a ser acessada. Normalmente as propriedades de um objeto trabalham seu valor, por exemplo:

str.toUpperCase()

Irá transformar o valor da variável “str” para letras maiúsculas.

Temos milhares de propriedades e métodos para cada objeto, veja abaixo.

Objeto String

Vou criar uma string primitiva logo abaixo:

/* Minha string */
var str = "Oie!";

Minha variável str terá propriedades e métodos (o objeto String que a envolve, na verdade) que podem ser acessados através de um ponto (.) e o nome da propriedade. Quando eu tentar acessar tal propriedade, a variável será automaticamente convertida em objeto e estará apta a funcionar como tal.

constructor

Retorna a função que criou o prototype do objeto String:

alert( str.constructor );

Retorna:

function String() {
    [native code]
}

length

Retorna o número de caracteres da variável.

/* Minha string */
var str = "Oie!";

alert( str.length ); // Retorna 4

charAt()

Retorna a posição de um caractere dada a determinada posição. As posições iniciam do 0 até o número de caracteres da variável menos um. Por exemplo, a variável do nosso exemplo tem o valor “Oie!“, são 4 caracteres, mas seus índices vão de 0 a 3.

/* Minha string */
var str = "Oie!";

alert( str.charAt(2) ); // Retorna e

charCodeAt()

Parecido com charAt(), porém, retorna o valor numérico Unicode do caractere pelo índice fornecido.

/* Minha string */
var str = "Oie!";

alert( str.charCodeAt(3) ); // Retorna 33

concat()

Concatena (junta) quantas variáveis você indicar entre parênteses. Se mais de uma, separe-as por vírgula.

/* Minha string */
var str = "Oie!";
var outraStr = ' Tudo bem?';

alert( str.concat( outraStr ) ); // Oie! Tudo bem?

fromCharCode()

Converte um (ou vários) código(s) Unicode para caractere(s):

/* Minha string */
var str = String.fromCharCode(33);

alert( str ); // Retorna !

fromCharCode() é um método estático (você vai ver isso em Numbers).

indexOf()

Encontra a posição da primeira ocorrência de um valor dentro de uma string.

/* Minha string */
var str = 'Ser ou não ser, eis a questão';

alert( str.indexOf('Ser') ); // Retorna 0
alert( str.indexOf('ser') ); // Retorna 11

lastIndexOf()

Encontra a posição da última ocorrência de um valor dentro de uma string.

/* Minha string */
var str = 'ser ou não ser, eis a questão';

alert( str.lastIndexOf('ser') ); // Retorna 11

localeCompare()

Compara strings de acordo com sua ordem

/* Strings iguais */
var str = 'a';
var str2 = 'a';

alert( str.localeCompare(str2) ); // Retorna 0

/* Strings em ordem inversa */
var str = 'b';
var str2 = 'a';

alert( str.localeCompare(str2) ); // Retorna 1

/* Strings em ordem alfabética */
var str = 'a';
var str2 = 'b';

alert( str.localeCompare(str2) ); // Retorna -1

match()

Utiliza expressões regulares para encontrar valores em uma string. Veremos match() na aula sobre expressões regulares.

replace()

Utiliza expressões regulares para encontrar e substituir valores em uma string. Veremos replace() na aula sobre expressões regulares.

search()

Utiliza expressões regulares para encontrar a posição de valores em uma string. Veremos search() na aula sobre expressões regulares.

var tuts = 'TutsUP';
alert( tuts.search('UP') ); // Retorna 4

slice()

Tira uma parte de uma string baseando-se num ponto inicial e num ponto final. O ponto inicial começa do zero (0), o ponto final, se omitido, se torna o número da posição do caractere final da string.

var str = "OI.";

alert( str.slice(0,1) ); // Retorna "O"
alert( str.slice(0,2) ); // Retorna "OI"
alert( str.slice(1) ); // Retorna "I."

split()

Divide uma string baseando-se no caractere da divisão. Se o caractere for omitido, split não fará nada, se um caractere vazio for indicado, divide todos os caracteres da string.

var str = "Oi. Sou Luiz.";

alert( str.split('.') ); // Array( 'Oi', 'Sou Luiz', '' )
alert( str.split(' ') ); // Array( 'Oi.' , 'Sou,Luiz.' )
alert( str.split('') ); // Array( 'O', 'i', '.', '', 'S', 'o', 'u', '', 'L', 'u', 'i', 'z', '.' )

substr() e substring()

Retorna uma parte de uma string baseando-se na posição inicial e no número de caracteres desejados.

var str = "Oi. Sou Luiz.";

alert( str.substr(4,3) ); // Retorna "Sou"

toLocaleLowerCase() e toLowerCase()

Converte o valor da variável para minúsculo.

var str = "OI";

alert( str.toLowerCase() ); // Retorna "oi"

toLocaleUpperCase() e toUpperCase()

Converte o valor da variável para maiúsculo.

var str = "oi";

alert( str.toUpperCase() ); // Retorna "OI"

toString() e valueOf()

Retornam o valor de uma string.

var str = "OI";

alert( str.valueOf() ); // Retorna "OI"

trim()

Remove os espaços do início e do fim de uma variável.

var str = "      OI        ";

alert( str.trim() ); // Retorna "OI"

anchor()

Retorna uma âncora HTML. Coloque o nome da âncora entre parênteses.

var str = "OI";

alert( str.anchor('minha_ancora') ); 
// Retorna: <a name="minha_ancora">OI</a>

bold()

Retorna a tag HTML <b>.

var str = "OI";

alert( str.bold() ); 
// Retorna: <b>OI</b>

italics()

Retorna a tag HTML <i>:

var str = "OI";

alert( str.italics() ); 
// Retorna: <i>OI</i>

link()

Retorna um link em HTML:

var str = "OI";

alert( str.link('http://www.todoespacoonline.com/w/') ); 
// Retorna: <a href="http://www.todoespacoonline.com/w/">OI</a>

small()

Retorna a tag HTML <small>

var str = "OI";

alert( str.small() ); 
// Retorna: <small>OI</small>

sub()

Retorna a tag HTML <sub>

var str = "OI";

alert( str.sub() ); 
// Retorna: <sub>OI</sub>

sup()

Retorna a tag HTML <sup>

var str = "OI";

alert( str.sup() ); 
// Retorna: <sup>OI</sup>

Objeto Number

Antes de começarmos a falar sobre os objetos Number em Javascript, vamos entender como funcionam os métodos estáticos e as propriedades de objetos.

Até agora, a maioria das opções que foram faladas operam sobre as instâncias dos objetos nativos Javascript, ou seja, normalmente trabalham o valor do objeto e não sobre a classe do mesmo. Essas são as propriedades de um objeto.

Outro tipo de método que podemos utilizar é o método que opera sobre a classe do objeto, também conhecido como método estático. Neste método não precisamos de um valor, mas simplesmente do nome da classe do objeto, ou melhor, “Number“.

Especificamente para o objeto Number, temos cinco métodos estáticos disponíveis:

  • Number.MAX_VALUE – O número mais alto que pode ser utilizado em Javascript.
  • Number.MIN_VALUE – O menor número que podemos utilizar em Javascript.
  • Number.NEGATIVE_INFINITY – Quando um número ultrapassa o menor número possível em Javascript.
  • Number.POSITIVE_INFINITY – Quando um número ultrapassa o maior número possível em Javascript.
  • Number.NaN – Representa um valor “Not-a-Number” (Não é um número) em Javascript.

Se precisar, você pode acessar estes valores como preferir, por exemplo:

var max_val = Number.MAX_VALUE;

alert( max_val );

As propriedades (de valor) do objeto Number podem ser três:

  • toExponential( valor numérico ) – Retorna uma string representando uma notação exponencial;
  • toFixed( valor numérico ) – Retorna uma string representando um número usando notação de ponto fixo;
  • toPrecision( valor numérico ) – Retorna uma string representando uma número usando uma precisão determinada.

Os métodos toString() e valueOf() também são suportados para o objeto Number.

Veja exemplos:

var numero = 25.4691;

// Precisão de 4 números 25.4691 = 25.47 (arredondado)
document.writeln( numero.toPrecision(4) + '<br>' ); // 25.47

// 10 números após o ponto 25.4691 = 25.4691000000
document.writeln( numero.toFixed(10) + '<br>' ); // 25.4691000000

// Notação exponencial: 25.4691 = 2.5e+1
document.writeln( numero.toExponential(1) + '<br>' ); // 2.5e+1

É tudo bastante simples se você parar para analisar.

Objeto Boolean

Para objetos boolean, não temos muito o que falar. Eles não têm métodos próprios nem propriedades, você só pode utilizar toString() e valueOf() para obter seu valor, porém, não sei por que motivo você iria querer obter um valor booleano – true ou false – na sua aplicação.

var valor = true;

alert( valor.toString() ); // true

Simples assim!

Outras aulas

Caso tenha perdido a aula anterior, segue o link:

Próxima aula:

Caso queira visualizar todas as aulas dessa sessão em ordem cronológica invertida: