Bagaimana mengkonversi objek javascript menjadi string jelaskan dengan contoh?

Question

Terkadang, Anda perlu mengonversi objek JavaScript menjadi string biasa yang berguna untuk menyimpan data objek dalam database. Dalam tutorial ini, kami akan menyarankan dua metode untuk mengonversi objek menjadi string

Table of Contents Show

Membandingkan 5 cara
Concat String Kosong
Rangkaian Templat
JSON. merangkai()
Rangkaian()
Kesimpulan. Tali() 🏆
Mengapa Anda tidak boleh menggunakan string + ''; // 'hello' number + ''; // '123' boolean + ''; // 'true' array + ''; // '1,2,3' object + ''; // '[object Object]' undefinedValue + ''; // 'undefined' nullValue + ''; // 'null' // ⚠️ symbolValue + ''; // ❌ TypeError 5
Masukan Komunitas
Bagaimana Anda mengonversi objek menjadi string?
Bagaimana cara mengubah tipe data apa pun menjadi string dalam JavaScript?
Bagaimana cara mengubah elemen menjadi string dalam JavaScript?
Bagaimana cara mengubah array objek menjadi string dalam JavaScript?

Metode ini digunakan untuk mengubah objek menjadi string yang diperlukan untuk mengirim data melalui server web. Itu mengubah set variabel dalam objek menjadi string JSON

JSON Javascript. metode merangkai

var objToStr = {namasitus. "W3Docs", namabuku. "Javascript", jumlah buku. 5 }; . stringify(objToStr); . log(myJSON);

Keluaran

{"siteName":"W3Docs", "bookName":"Javascript", "booksCount": 5}

Namun, ini tidak berfungsi jika objek memiliki fungsi fungsi

Metode toString() juga dipanggil saat Anda perlu mengonversi objek menjadi string

metode Javascript toString

var obj = {namasitus. "W3Docs", namabuku. "Javascript", jumlah buku. 5 }; . hasOwnProperty(k)) { str += k + '. ' + objek[k] + '\n'; . log(str);

JSON. stringify() metode mengubah objek atau nilai menjadi string JSON. JSON. stringify melompati beberapa objek khusus JavaScript, seperti properti yang menyimpan properti yang tidak terdefinisi, properti simbolik, dan properti fungsi

Metode toString() dipanggil tanpa argumen dan harus mengembalikan sebuah string. String yang Anda kembalikan harus didasarkan pada nilai objek yang metodenya dipanggil agar berguna

Dalam Tutorial Javascript ini, saya akan memberi tahu Anda cara mengubah objek Javascript menjadi string dan string menjadi objek json

Metode JSON.stringify()_ digunakan untuk mengonversi Objek JSON menjadi string JSON. Terkadang dalam pengembangan, kita perlu membuat serialisasi data menjadi string agar dapat berinteraksi dengan API atau server web

Metode JSON.parse()_ digunakan untuk mengubah string JSON menjadi objek JSON. Terkadang Anda mengirim string json ke API atau server web dan di sisi server web Anda perlu mengubah string itu menjadi objek json yang valid untuk membaca parameter. Konversi string ke objek ini dapat dengan mudah dilakukan dengan bantuan metode JSON.parse()

Di bawah ini adalah contoh mengubah objek menjadi string dan string menjadi objek kembali

<!DOCTYPE html>
<html>
<head>
    <title>How to Convert Object to String and String to Object in Javascript? - expertphp.in</title>
</head>
<body>
  
<script>
      
    var obj = {
        url: "http://www.expertphp.in/"
    };
  
    var stringObj = JSON.stringify(obj);
  
    console.log(typeof stringObj); // string

    var jsonObj=JSON.parse(stringObj)

    console.log(typeof jsonObj); // object
  
</script>
  
</body>
</html>

_

Dalam contoh di atas, saya telah mendefinisikan objek sederhana dan kemudian mengubahnya menjadi string menggunakan metode JSON.stringify. Sekali lagi saya mengonversi string json itu menjadi objek dengan bantuan metode JSON.parse()

Itu juga yang saya gunakan karena paling eksplisit - memudahkan orang lain untuk mengikuti maksud kode Anda 🤓

Ingat kode terbaik belum tentu merupakan cara yang paling pintar, itu adalah cara terbaik untuk mengomunikasikan pemahaman kode Anda kepada orang lain 💯

const value = 12345;

// Concat Empty String
value + '';

// Template Strings
`${value}`;

// JSON.stringify
JSON.stringify(value);

// toString()
value.toString();

// String()
String(value);

// RESULT
// '12345'

Membandingkan 5 cara

Baiklah, mari kita uji 5 cara dengan nilai yang berbeda. Berikut adalah variabel yang akan kami uji

const string = "hello";
const number = 123;
const boolean = true;
const array = [1, "2", 3];
const object = {one: 1 };
const symbolValue = Symbol('123');
const undefinedValue = undefined;
const nullValue = null;

Concat String Kosong

string + ''; // 'hello'
number + ''; // '123'
boolean + ''; // 'true'
array + ''; // '1,2,3'
object + ''; // '[object Object]'
undefinedValue + ''; // 'undefined'
nullValue + ''; // 'null'

// ⚠️
symbolValue + ''; // ❌ TypeError

_

Dari sini, Anda dapat melihat bahwa metode ini akan melempar

const string = "hello";
const number = 123;
const boolean = true;
const array = [1, "2", 3];
const object = {one: 1 };
const symbolValue = Symbol('123');
const undefinedValue = undefined;
const nullValue = null;

1 jika nilainya adalah

const string = "hello";
const number = 123;
const boolean = true;
const array = [1, "2", 3];
const object = {one: 1 };
const symbolValue = Symbol('123');
const undefinedValue = undefined;
const nullValue = null;

2. Kalau tidak, semuanya terlihat cukup bagus

Rangkaian Templat

`${string}`; // 'hello'
`${number}`; // '123'
`${boolean}`; // 'true'
`${array}`; // '1,2,3'
`${object}`; // '[object Object]'
`${undefinedValue}`; // 'undefined'
`${nullValue}`; // 'null'

// ⚠️
`${symbolValue}`; // ❌ TypeError

Hasil penggunaan Template String pada dasarnya sama dengan Concat Empty String. Sekali lagi, ini mungkin bukan cara yang ideal saat menangani

const string = "hello";
const number = 123;
const boolean = true;
const array = [1, "2", 3];
const object = {one: 1 };
const symbolValue = Symbol('123');
const undefinedValue = undefined;
const nullValue = null;

2 karena akan menimbulkan

const string = "hello";
const number = 123;
const boolean = true;
const array = [1, "2", 3];
const object = {one: 1 };
const symbolValue = Symbol('123');
const undefinedValue = undefined;
const nullValue = null;

1

Ini adalah TypeError jika Anda penasaran.

const string = "hello";
const number = 123;
const boolean = true;
const array = [1, "2", 3];
const object = {one: 1 };
const symbolValue = Symbol('123');
const undefinedValue = undefined;
const nullValue = null;

5

JSON. merangkai()

// ⚠️
JSON.stringify(string); // '"hello"'
JSON.stringify(number); // '123'
JSON.stringify(boolean); // 'true'
JSON.stringify(array); // '[1,"2",3]'
JSON.stringify(object); // '{"one":1}'
JSON.stringify(nullValue); // 'null'
JSON.stringify(symbolValue); // undefined
JSON.stringify(undefinedValue); // undefined

Jadi Anda biasanya TIDAK akan menggunakan JSON. stringify untuk mengubah nilai menjadi string. Dan benar-benar tidak ada paksaan yang terjadi di sini. Saya terutama memasukkan cara ini untuk menjadi lengkap. Jadi, Anda mengetahui semua alat yang tersedia untuk Anda. Dan kemudian Anda dapat memutuskan alat apa yang akan digunakan dan tidak digunakan tergantung pada situasinya 👍

Satu hal yang ingin saya tunjukkan karena Anda mungkin tidak menangkapnya. Saat Anda menggunakannya pada nilai

const string = "hello";
const number = 123;
const boolean = true;
const array = [1, "2", 3];
const object = {one: 1 };
const symbolValue = Symbol('123');
const undefinedValue = undefined;
const nullValue = null;

_6 yang sebenarnya, itu akan mengubahnya menjadi string dengan tanda kutip

Anda dapat membaca lebih lanjut tentang ini di Kyle Simpson, "You Don't Know JS series".

Catatan tambahan tentang pentingnya mengetahui dasar-dasar Anda

Ya, Anda mungkin telah memperhatikan di catatan kode saya, saya sering mengutip buku-buku Kyle. Jujur saya telah belajar banyak dari itu. Bukan berasal dari latar belakang ilmu komputer, ada banyak konsep dasar yang saya kurang. Dan bukunya telah membuat saya menyadari pentingnya memahami dasar-dasarnya. Bagi mereka yang ingin menjadi programmer yang serius, cara untuk naik level adalah BENAR-BENAR memahami dasar-dasarnya. Tanpa itu, sangat sulit untuk naik level. Anda akhirnya menebak masalahnya. Tetapi jika Anda mengetahui dasar-dasarnya, Anda akan memahami "mengapa" sesuatu. Dan mengetahui "mengapa" akan membantu Anda menjalankan "bagaimana" dengan lebih baik. Anyhoo, sangat merekomendasikan seri ini untuk mereka yang mencoba menjadi programmer senior

keString()

string.toString(); // 'hello'
number.toString(); // '123'
boolean.toString(); // 'true'
array.toString(); // '1,2,3'
object.toString(); // '[object Object]'
symbolValue.toString(); // 'Symbol(123)'

// ⚠️
undefinedValue.toString(); // ❌ TypeError
nullValue.toString(); // ❌ TypeError

Jadi pertempuran benar-benar bermuara pada

const string = "hello";
const number = 123;
const boolean = true;
const array = [1, "2", 3];
const object = {one: 1 };
const symbolValue = Symbol('123');
const undefinedValue = undefined;
const nullValue = null;

_7 dan

const string = "hello";
const number = 123;
const boolean = true;
const array = [1, "2", 3];
const object = {one: 1 };
const symbolValue = Symbol('123');
const undefinedValue = undefined;
const nullValue = null;

8 saat Anda ingin mengonversi nilai menjadi string. Yang ini melakukan pekerjaan yang cukup bagus. Kecuali itu akan menimbulkan kesalahan untuk

const string = "hello";
const number = 123;
const boolean = true;
const array = [1, "2", 3];
const object = {one: 1 };
const symbolValue = Symbol('123');
const undefinedValue = undefined;
const nullValue = null;

_9 dan

string + ''; // 'hello'
number + ''; // '123'
boolean + ''; // 'true'
array + ''; // '1,2,3'
object + ''; // '[object Object]'
undefinedValue + ''; // 'undefined'
nullValue + ''; // 'null'

// ⚠️
symbolValue + ''; // ❌ TypeError

0. Jadi pastikan untuk memperhatikan hal ini

Rangkaian()

String(string); // 'hello'
String(number); // '123'
String(boolean); // 'true'
String(array); // '1,2,3'
String(object); // '[object Object]'
String(symbolValue); // 'Symbol(123)'
String(undefinedValue); // 'undefined'
String(nullValue); // 'null'

Baiklah, sepertinya kita sudah menemukan pemenangnya 🏆

Seperti yang Anda lihat, metode

const string = "hello";
const number = 123;
const boolean = true;
const array = [1, "2", 3];
const object = {one: 1 };
const symbolValue = Symbol('123');
const undefinedValue = undefined;
const nullValue = null;

_8 menangani

string + ''; // 'hello'
number + ''; // '123'
boolean + ''; // 'true'
array + ''; // '1,2,3'
object + ''; // '[object Object]'
undefinedValue + ''; // 'undefined'
nullValue + ''; // 'null'

// ⚠️
symbolValue + ''; // ❌ TypeError

0 dan

const string = "hello";
const number = 123;
const boolean = true;
const array = [1, "2", 3];
const object = {one: 1 };
const symbolValue = Symbol('123');
const undefinedValue = undefined;
const nullValue = null;

9 dengan cukup baik. Tidak ada kesalahan yang terjadi - kecuali itu yang Anda inginkan. Ingat saran saya secara umum. Anda akan mengetahui aplikasi Anda dengan baik, jadi Anda harus memilih cara yang paling sesuai untuk situasi Anda

Kesimpulan. Tali() 🏆

Setelah menunjukkan kepada Anda bagaimana semua metode yang berbeda menangani jenis nilai yang berbeda. Mudah-mudahan, Anda menyadari perbedaannya dan Anda akan tahu alat apa yang harus diambil saat Anda menangani kode Anda lagi. Jika Anda tidak yakin,

const string = "hello";
const number = 123;
const boolean = true;
const array = [1, "2", 3];
const object = {one: 1 };
const symbolValue = Symbol('123');
const undefinedValue = undefined;
const nullValue = null;

_8 selalu merupakan default yang bagus 👍

Mengapa Anda tidak boleh menggunakan string + ''; // 'hello' number + ''; // '123' boolean + ''; // 'true' array + ''; // '1,2,3' object + ''; // '[object Object]' undefinedValue + ''; // 'undefined' nullValue + ''; // 'null' // ⚠️ symbolValue + ''; // ❌ TypeError 5

Anda mungkin memperhatikan di panduan gaya Airbnb, disebutkan untuk tidak menggunakan

string + ''; // 'hello'
number + ''; // '123'
boolean + ''; // 'true'
array + ''; // '1,2,3'
object + ''; // '[object Object]'
undefinedValue + ''; // 'undefined'
nullValue + ''; // 'null'

// ⚠️
symbolValue + ''; // ❌ TypeError

5. Mari kita lihat alasannya

const number = 123;

typeof new String(number); // 'object'

Jadi, saat Anda membuat nilai menggunakan konstruktor dengan kata kunci

string + ''; // 'hello'
number + ''; // '123'
boolean + ''; // 'true'
array + ''; // '1,2,3'
object + ''; // '[object Object]'
undefinedValue + ''; // 'undefined'
nullValue + ''; // 'null'

// ⚠️
symbolValue + ''; // ❌ TypeError

7, Anda sebenarnya membuat pembungkus objek. Dan inilah yang dihasilkannya

console.log(new String(number));
// String {"123"}

Intinya adalah, new String("123") membuat objek pembungkus string di sekitar "123", bukan hanya nilai primitif "123" itu sendiri. [diedit]

Salah satu alasan mengapa Anda melakukan ini adalah

Ada sangat sedikit penggunaan praktis untuk objek String yang dibuat oleh new String("foo"). Satu-satunya keuntungan yang dimiliki objek String dibandingkan nilai string primitif adalah sebagai objek ia dapat menyimpan properti

var str = "foo";
str.prop = "bar";
alert(str.prop); // undefined

var str = new String("foo");
str.prop = "bar";
alert(str.prop); // "bar"

StackOverflow. Apa gunanya new String(“x”) di JavaScript?

Masukan Komunitas

@MaxStalker. Saya akan menggunakan metode yang berbeda tergantung pada aplikasinya

"" + val. cukup masukkan angka ke string - katakanlah di dalam. peta()
JSON. merangkai (val). perlu mengubah objek kecil yang tidak bersarang
toString(radix). konversi angka ke heksadesimal atau biner

@frontendr. Hati-hati saat menggunakan JSON. stringify, yang akan mengubah string menjadi string dengan tanda kutip 😉

@super. pro. dev. saya juga tahu. String baru (foo) tapi saya tidak suka metode ini (ini akan membuat objek String, berbeda dengan String (tanpa "baru") yang membuat string primitif)

@BrunoGiubilei. ketika menggabungkan string kosong, sebagian besar benar untuk mendeklarasikan string kosong terlebih dahulu, karena ketika Anda menggabungkan lebih dari satu nilai, jumlahnya telah diproses terlebih dahulu

Bagaimana Anda mengonversi objek menjadi string?

Dalam Java, objek dapat dikonversi menjadi string dengan menggunakan metode toString() atau dengan menggunakan kelas objek String. nilai(objek) metode . Objek apa pun di java dapat dikonversi menjadi string baik itu kelas yang ditentukan pengguna atau pembuat string, buffer string, dll.

Bagaimana cara mengubah tipe data apa pun menjadi string dalam JavaScript?

Mengonversi Nilai ke String . calling either String() or n. toString() .

Bagaimana cara mengubah elemen menjadi string dalam JavaScript?

Metode 2. Menggunakan JSON. stringify() mengubah objek javascript menjadi string yang diperlukan untuk mengirim data melalui server web.

Bagaimana cara mengubah array objek menjadi string dalam JavaScript?

Kita dapat mengubah larik angka dan larik string menjadi string menggunakan toString(). Kita juga dapat mengonversi array bersarang menjadi string menggunakan toString(). Dan untuk mengubah string kembali ke array, kita akan menggunakan metode split()

kode javascript